Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

197
Views
How to send a service/component property to a vanilla JS file in Angular?

In an Angular project, I've got a third party library I'm trying out, but it needs some tweaks to work how I want it to. In one of the library's JS files, I need the ability to dynamically construct a URL using a property received from my Angular service (or, perhaps from a component).

Is there any way I can import an Angular service's property into a vanilla JS file and use it?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I will try answering given the information you provided

If you can, I would advise having the external JS file as a dependency of your angular's service and not the opposite.

But this is not what you are asking and if you cannot, injecting an angular service into an external JS is quite cumbersome because you need the whole injection context to do so.

In your situation, if the library you want to use is kind of monolithic or hard to use as a dependency and if you can change some code into it, then you could possibly rely on a mediator.

A mediator is a class known to anyone, and anyone can use it to send to or get information from. In your case, you could have a plain JS mediator so that you can import it from your plain JS file too.

But normally you do have your angular SPA and unless you do have events coming from your library, you should have the hand on who triggers what and when. So in the case of an event, I do not see any problem of sending your property's data to your library.

In the case where your library emits events by its own, either watch for those events within angular, build your url and send the data back to the library (be careful to use an ngZone in that case)

If your library must handle events on its own and there is no way to have the hand on it, perhaps you should just pass a callback to get the data you need to provide to this library, that callback will provide the mandatory data on time to the lib. (I've no detail of the library and therefore cannot help much). Here is how it could work:

import MyLib from './myLib.js' 

@Injectable({ providedIn: 'root' })
export class MyService {

private myLib: MyLib;

constructor(){
   this.myLib = new MyLib();
   this.myLib.onTask(()=>this.getUrl())
}

private getUrl(): string {
return "www.urlFromAService.com"
}
}

And if you really do not have any callback, you could store a callback on the object's instance

this.myLib.getUrl = ()=>this.getUrl();

so that within your js code, your instance will have a getUrl function using the service's method (and context), while this is possible, it is hackish, and I would only advise you to do this for a POC.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!