Angular How to implement nested resolvers

Question

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.

You can put condition on child element like *ngIf = "dataAvailable" — alokstar, Nov 21 '18 at 19:22
I think you are mixing the terms here. Do you want to use data from one resolver as input for child component? Or do you want to force the execution of another resolver based on some piece of data from the object that was returned from the first resolver? Remember that resolver is, as the name suggests, resolved at some specific route. So if you want to execute another resolver, you'll need to navigate to another route where you have the second resolver. — Huske, Nov 21 '18 at 19:26
How come you don't load both in the resolver? ngOnInit only fires after all resolves have completed. — Mickers, Nov 21 '18 at 20:55
@HuseinRoncevic see the edit 1 i have made to answer your clarifications — Tom O'Brien, Nov 22 '18 at 11:43

score 1 · Accepted Answer · answered Nov 21 '18 at 19:32

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.

Angular How to implement nested resolvers

1 Answers1