2

I am getting the JSON Object value in my Data service, but All components are loading before my Data service loads. So, I am getting undefined values when I call service method from components.

zgue
  • 3,793
  • 9
  • 34
  • 39
Ram a Rao
  • 35
  • 1
  • 1
  • 8
  • 1
    can you share your code ? – billyjov Sep 24 '18 at 09:38
  • Possible duplicate of [Angular2: How to load data before rendering the component?](https://stackoverflow.com/questions/35655361/angular2-how-to-load-data-before-rendering-the-component) – Jota.Toledo Sep 24 '18 at 11:49

5 Answers5

7

I supposed you are using a Router to access to your page, so you can simply use the "resolver" feature : RouterLink description. 

path: 'app', component: AppPage, resolve: { myData : DataResolve }

Here we ask to resolve the variable "myData" thanks to the resolver DataResolve. DataResolve is a simple Injectable implementing Resolve interface : 

import { Resolve } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class UserResolve implements Resolve<any> {

  constructor(private myService: MyService) {}

  async resolve() {
    const myData= await this.myService.getMyData().toPromise();
    return myData;
  }

}

Then when the value are resolve the component will load. And you can get your data from the ActivatedRoute : 

 import { ActivatedRoute } from '@angular/router';

 constructor(private route: ActivatedRoute {
    this.route.data.subscribe(() => {
      this.data = this.route.snapshot.data.myData;
    });
  }
xrobert35
  • 2,488
  • 1
  • 16
  • 15
2

You can use a resolver in your data service:

  1. In your route you can add resolve property.
  2. Implement the resolve interface in your service and add a resolve method.
  3. just subscribe to the observable service in your component.

Take a reference from angular.io

Jai
  • 74,255
  • 12
  • 74
  • 103
1

You can use resolve in router.

Go through link below

https://www.techiediaries.com/angular-router-resolve/

https://angular.io/api/router/Resolve

Thomsheer Ahamed
  • 183
  • 1
  • 9
1

if you using HttpClient for fetching data you need subscribe to stream, because it returns observable

this.MyService.method().subscribe(value => {
  //  you can use value here
});

or you can use async pipe in template

// controller
value$ = this.MyService.method()

// template
<p>{{value$ | async}}</p>

beside that you can register your service factory into angular providers via APP_INITIALIZER token and your function will be executed when an application is initialized.

@NgModule({
  ...
  providers: [
    { provide: APP_INITIALIZER, useFactory: initSomething, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
Andranik Antonyan
  • 91
  • 2
  • 1
  • { provide: APP_INITIALIZER, useFactory: initSomething, multi: true } ..... in this useFactory loads Whole MyService ts file? or only one method in MyService?, if it's load one method how do i load multiple methods? – Ram a Rao Sep 24 '18 at 10:29
  • You can have one main function which will call all nested methods and resolve promise , here is an example https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e – Andranik Antonyan Sep 24 '18 at 13:52
0

Maybe a simpler approach to load your service before any other component is to add it as an argument of the AppComponent of your Angular app

export class AppComponent {
      constructor(private myService: MyService) {}
...
}

If you want to do any call at the construction of the service, it is the role of its constructor

jeanlou1370
  • 372
  • 3
  • 6