CODEWITHSUNDEEP
angularangular-resolver
Tom O'Brien
Tom O'Brien

Reputation: 1831

Angular How to implement nested resolvers

I have a component that gets a category like so using a resolver:

ngOnInit() {
    this.category = this.route.snapshot.data['category'];
}

So this works lovely and gets me category, which is essentially a list of users.

I've manually got the user account details in the ngOnInit() after I got the list of usernames from the above resolver, but when i pass them as an Input() to a child component, they haven't loaded yet,

This causes the error below to get thrown, which makes sense. 

CategoryItemComponent.html:4 ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (CategoryItemComponent.html:4)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
at checkAndUpdateView (core.js:11312)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)

My questions is: can I use this list of users from the first resolver to use as an input to a second resolver. If so, how exactly is this done?

Edit 1:

I currently supply the downloaded users from the ngOnInit() to a child component like so:

<app-account [account]="account"></app-account>

I understand I can do as the answer by @alokstar but I was wondering if this is the recommended way - or is there a more elegant way of nesting the resolvers.

Upvotes: 0

Views: 644

Answers (1)

alokstar
alokstar

Reputation: 499

So if this input is required to load child component then you can think of putting condition on your child before it loads like:

<child-component *ngIf = 'dataAvailable'>
</child-component>

Or if you want to load child component even if the input is undefined or not available, you can add defensive conditions in child component to get away from the 'undefined' kind of errors.

Upvotes: 1

Related Questions