Having an issue where my object is not defined before the page renders. I am looking to load my data first and then render the page without using a resolver or ngIf. Could I utilize LifeCycle Hooks to achieve this?
Here is my current setup:
app.component.ts
onNavigateToDetailView(url: string, title: string){
this.service.getResourceUrl(url).subscribe(
(data) => {
this.service.detailedObj = data;
console.log(data);
}
);
this.router.navigate(['detailedview/' + title]);
}
Now in my view.component.ts, I want to assign the object in my service to a variable:
ngOnInit(){
this.obj = this.service.obj;
}
In my view.component.html, I have:
{{obj.text}}
It is not working because the object is undefined during rendering. If I were to use the object in my service like this
{{this.service.obj.text}
it works, but I prefer not to use it.
So, is there a way to wait for the data to be defined and then render the page without using a Resolver or *ngIf? Could this be achieved with another LifeCycle Hook instead of ngOnInit?
Stackblitz: https://stackblitz.com/edit/angular-21zvgm
After navigating to hello.component, an empty object is output to the console. However, when you click show in hello.component, the object initializes correctly...