angular2-services

Pass config data using forRoot

by

You are almost there, simply provide both SampleService and config in your module like below: export class SampleModule { static forRoot(config: CustomConfig): ModuleWithProviders<SampleModule> { // User config get logged here console.log(config); return { ngModule: SampleModule, providers: [SampleService, {provide: ‘config’, useValue: config}] }; } } @Injectable() export class SampleService { foo: string; constructor(@Inject(‘config’) private config:CustomConfig) { … Read more

Angular 2 – Services consuming others services before call a method

by

I think that you could preload such hints at the application startup. For this, you could leverage the APP_INITIALIZER service. The application will wait for the returned promise to be resolved before actually starting. Here is a sample: provide(APP_INITIALIZER, { useFactory: (service:GlobalService) => () => service.load(), deps:[GlobalService, HTTP_PROVIDERS], multi: true }) The load method would … Read more

How to use Dependency Injection (DI) correctly in Angular2?

by

Broad question, TL;DR version @Injectable() is a decorator which tells the typescript that decorated class has dependencies and does not mean that this class can be injected in some other. And then TypeScript understands that it needs to Inject the required metadata into decorated class when constructing, by using the imported dependencies. bootstrap(app, [service]) bootstrap() … Read more

Angular2 – Share data between components using services

by

You define it within your two components. So the service isn’t shared. You have one instance for the AppComponent component and another one for the Grid component. @Component({ selector: ‘my-app’, templateUrl: ‘app/templates/app.html’, directives: [Grid], providers: [ConfigService] }) export class AppComponent { (…) } The quick solution is to remove the providers attribute to your Grid … Read more

How to call component method from service? (angular2)

by

Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components which will need to use it (all the caller components and the callee method) and make use of the properties of Observables. The shared service can look something like this: import … Read more

How to share service between two modules – @NgModule in angular not between to components?

by

As per the final version of Angular 2, services provided by a module are available to every other module that imports it. The Official Style Guide advice that application-wide services (singletons) that are to be reused anywhere in the application should be provided by some Core Module, that is to be imported in the main … Read more

Angular 2 – communication of typescript functions with external js libraries

by

Just fire a custom event using dispatchEvent. In Angular you can listen by adding to any component that is actually added to the DOM: in any template: <div (window:custom-event)=”updateNodes($event)”> or in the components class: @HostListener(‘window:custom-event’, [‘$event’]) updateNodes(event) { … } or in the @Component() or @Directive() annotation: @Component({ selector: ‘…’, host: {‘(window:custom-event)’:’updateNodes($event)’} }) where custom-event … Read more

Angular 2 cache observable http result data [duplicate]

by

If you lean into observables as a means of sharing data, you can adopt the following approach: import { Injectable } from ‘@angular/core’; import { HttpClient } from ‘@angular/common/http’; import { Observable, ReplaySubject } from ‘rxjs’; import { SomeModel } from ‘path/to/it’; @Injectable({ providedIn: ‘root’ }) export class CachedService { private dataSubject = new ReplaySubject<SomeModel>(1); … Read more

Can lazy-loaded modules share the same instance of a service provided by their parent?

by

Using a forRoot, as mentioned here, is what you need probably. The problem it’s meant to solve, is directly related to the problem you are experiencing with lazy loaded modules getting their own service. It’s explained here in Configure core services with forRoot, but that section doesn’t explain about the lazy-loading issue. That is explained … Read more