Mixing
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.
angular angular-resolver
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
add a comment |
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.
angular angular-resolver
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
2
You can put condition on child element like *ngIf = "dataAvailable"
– alokstar
Nov 21 '18 at 19:22
Let me know if I misunderstood your question!
– alokstar
Nov 21 '18 at 19:25
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.
– Husein Roncevic
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
add a comment |
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.
angular angular-resolver
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
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.
angular angular-resolver
angular angular-resolver
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
edited Nov 22 '18 at 12:04
Tom O'Brien
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
asked Nov 21 '18 at 19:20
Tom O'BrienTom O'Brien
47921747
47921747
2
You can put condition on child element like *ngIf = "dataAvailable"
– alokstar
Nov 21 '18 at 19:22
Let me know if I misunderstood your question!
– alokstar
Nov 21 '18 at 19:25
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.
– Husein Roncevic
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
add a comment |
2
You can put condition on child element like *ngIf = "dataAvailable"
– alokstar
Nov 21 '18 at 19:22
Let me know if I misunderstood your question!
– alokstar
Nov 21 '18 at 19:25
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.
– Husein Roncevic
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
2
2
You can put condition on child element like *ngIf = "dataAvailable"
– alokstar
Nov 21 '18 at 19:22
You can put condition on child element like *ngIf = "dataAvailable"
– alokstar
Nov 21 '18 at 19:22
Let me know if I misunderstood your question!
– alokstar
Nov 21 '18 at 19:25
Let me know if I misunderstood your question!
– alokstar
Nov 21 '18 at 19:25
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.
– Husein Roncevic
Nov 21 '18 at 19:26
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.
– Husein Roncevic
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
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
@HuseinRoncevic see the edit 1 i have made to answer your clarifications
– Tom O'Brien
Nov 22 '18 at 11:43
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419158%2fangular-how-to-implement-nested-resolvers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
add a comment |
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.
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
add a comment |
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.
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
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.
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
answered Nov 21 '18 at 19:32
alokstaralokstar
46927
46927
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419158%2fangular-how-to-implement-nested-resolvers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
You can put condition on child element like *ngIf = "dataAvailable"
– alokstar
Nov 21 '18 at 19:22
Let me know if I misunderstood your question!
– alokstar
Nov 21 '18 at 19:25
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.
– Husein Roncevic
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