Pass a list of components as input to another component
I would like to a pure UI component that can show a grid of other UI components, but the grid UI component must/can not know of the types of the other UI components it has to show in its grid, they can be anything (but of course always a Angular component).
How can I do this? What property type can I use in my grid component to hold a list of totally unknown components? And how do I display the components in the list in my grid layout?
Thank you
Søren
angular
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
add a comment |
I would like to a pure UI component that can show a grid of other UI components, but the grid UI component must/can not know of the types of the other UI components it has to show in its grid, they can be anything (but of course always a Angular component).
How can I do this? What property type can I use in my grid component to hold a list of totally unknown components? And how do I display the components in the list in my grid layout?
Thank you
Søren
angular
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
add a comment |
I would like to a pure UI component that can show a grid of other UI components, but the grid UI component must/can not know of the types of the other UI components it has to show in its grid, they can be anything (but of course always a Angular component).
How can I do this? What property type can I use in my grid component to hold a list of totally unknown components? And how do I display the components in the list in my grid layout?
Thank you
Søren
angular
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
I would like to a pure UI component that can show a grid of other UI components, but the grid UI component must/can not know of the types of the other UI components it has to show in its grid, they can be anything (but of course always a Angular component).
How can I do this? What property type can I use in my grid component to hold a list of totally unknown components? And how do I display the components in the list in my grid layout?
Thank you
Søren
angular
angular
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
asked Nov 22 '18 at 8:02
NeigaardNeigaard
88562554
88562554
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If I understood correctly, you could make use of inheritance here.
Create a BaseComponent from where the components members of your grid inherit, and then, in the grid component you can declare an array of BaseComponent.
Depending on what you want to do next with those members, you need to add them to the entryComponents in your module. You can read more about dynamic components here: https://angular.io/guide/dynamic-component-loader.
Hope it helps!
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
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%2f53426300%2fpass-a-list-of-components-as-input-to-another-component%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
If I understood correctly, you could make use of inheritance here.
Create a BaseComponent from where the components members of your grid inherit, and then, in the grid component you can declare an array of BaseComponent.
Depending on what you want to do next with those members, you need to add them to the entryComponents in your module. You can read more about dynamic components here: https://angular.io/guide/dynamic-component-loader.
Hope it helps!
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
add a comment |
If I understood correctly, you could make use of inheritance here.
Create a BaseComponent from where the components members of your grid inherit, and then, in the grid component you can declare an array of BaseComponent.
Depending on what you want to do next with those members, you need to add them to the entryComponents in your module. You can read more about dynamic components here: https://angular.io/guide/dynamic-component-loader.
Hope it helps!
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
add a comment |
If I understood correctly, you could make use of inheritance here.
Create a BaseComponent from where the components members of your grid inherit, and then, in the grid component you can declare an array of BaseComponent.
Depending on what you want to do next with those members, you need to add them to the entryComponents in your module. You can read more about dynamic components here: https://angular.io/guide/dynamic-component-loader.
Hope it helps!
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
If I understood correctly, you could make use of inheritance here.
Create a BaseComponent from where the components members of your grid inherit, and then, in the grid component you can declare an array of BaseComponent.
Depending on what you want to do next with those members, you need to add them to the entryComponents in your module. You can read more about dynamic components here: https://angular.io/guide/dynamic-component-loader.
Hope it helps!
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
answered Nov 22 '18 at 8:09
Lucian MoldovanLucian Moldovan
1464
1464
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
add a comment |
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
You got me on track here. I now have a base component and a array of those in my component (@Input() cards: CardComponent;), but how do I render them in my template? My template has (<ListView [items]="cards">), but how do I render each component inside this list?
– Neigaard
Nov 22 '18 at 8:22
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%2f53426300%2fpass-a-list-of-components-as-input-to-another-component%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
