Angular 6 - Best way to implement complex template
I'm relatively new to the Angular 2.0+ world, and I'm facing a question about template design. I'm sure there's an Angular way to do this; I just didn't find a clear answer yet.
So, the idea is that (see the attached image) I've the red component, that has to be included in many parts of the application. The red component has some styles, inputs and outputs that are gonna be the same for the whole app. But inside the red component there must be embedded three components that will vary depending on where the red component is placed.
For example, imagine the red component is the container for a detail page. If it's placed in the detail page of the entity A, green component will be a map, yellow an image and blue a read more button. All of those components must have inputs, outputs and probably references so they can be manipulated using view childs.
If the red component is placed somewhere else, then those three components will be different. And there could even be just 2, not three components.
Does someone has a clue on how to design the red component so it's reusable and can fit my necesities? Thanks a lot, and please let me know if more explanations are required for my problem to be understood.
javascript angular angular-components
asked Jan 19 at 16:19
ErwolErwol
1101211
add a comment |
I'm relatively new to the Angular 2.0+ world, and I'm facing a question about template design. I'm sure there's an Angular way to do this; I just didn't find a clear answer yet.
So, the idea is that (see the attached image) I've the red component, that has to be included in many parts of the application. The red component has some styles, inputs and outputs that are gonna be the same for the whole app. But inside the red component there must be embedded three components that will vary depending on where the red component is placed.
For example, imagine the red component is the container for a detail page. If it's placed in the detail page of the entity A, green component will be a map, yellow an image and blue a read more button. All of those components must have inputs, outputs and probably references so they can be manipulated using view childs.
If the red component is placed somewhere else, then those three components will be different. And there could even be just 2, not three components.
Does someone has a clue on how to design the red component so it's reusable and can fit my necesities? Thanks a lot, and please let me know if more explanations are required for my problem to be understood.
javascript angular angular-components
asked Jan 19 at 16:19
ErwolErwol
1101211
add a comment |
I'm relatively new to the Angular 2.0+ world, and I'm facing a question about template design. I'm sure there's an Angular way to do this; I just didn't find a clear answer yet.
So, the idea is that (see the attached image) I've the red component, that has to be included in many parts of the application. The red component has some styles, inputs and outputs that are gonna be the same for the whole app. But inside the red component there must be embedded three components that will vary depending on where the red component is placed.
For example, imagine the red component is the container for a detail page. If it's placed in the detail page of the entity A, green component will be a map, yellow an image and blue a read more button. All of those components must have inputs, outputs and probably references so they can be manipulated using view childs.
If the red component is placed somewhere else, then those three components will be different. And there could even be just 2, not three components.
Does someone has a clue on how to design the red component so it's reusable and can fit my necesities? Thanks a lot, and please let me know if more explanations are required for my problem to be understood.
javascript angular angular-components
asked Jan 19 at 16:19
ErwolErwol
1101211
I'm relatively new to the Angular 2.0+ world, and I'm facing a question about template design. I'm sure there's an Angular way to do this; I just didn't find a clear answer yet.
So, the idea is that (see the attached image) I've the red component, that has to be included in many parts of the application. The red component has some styles, inputs and outputs that are gonna be the same for the whole app. But inside the red component there must be embedded three components that will vary depending on where the red component is placed.
For example, imagine the red component is the container for a detail page. If it's placed in the detail page of the entity A, green component will be a map, yellow an image and blue a read more button. All of those components must have inputs, outputs and probably references so they can be manipulated using view childs.
If the red component is placed somewhere else, then those three components will be different. And there could even be just 2, not three components.
Does someone has a clue on how to design the red component so it's reusable and can fit my necesities? Thanks a lot, and please let me know if more explanations are required for my problem to be understood.
javascript angular angular-components
javascript angular angular-components
asked Jan 19 at 16:19
ErwolErwol
1101211
asked Jan 19 at 16:19
ErwolErwol
1101211
asked Jan 19 at 16:19
ErwolErwol
1101211
asked Jan 19 at 16:19
ErwolErwol
1101211
asked Jan 19 at 16:19
ErwolErwol
1101211
1101211
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -
<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>
- https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
Can we see thered-componentHTML template that would allow to do that?
– ConnorsFan
Jan 19 at 16:47
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the namedng-contentin thered-componenttemplate. In the current answer, we only see how thered-componentwill be used, not how it is defined.
– ConnorsFan
Jan 19 at 16:53
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
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%2f54269036%2fangular-6-best-way-to-implement-complex-template%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
In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -
<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>
- https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
Can we see thered-componentHTML template that would allow to do that?
– ConnorsFan
Jan 19 at 16:47
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the namedng-contentin thered-componenttemplate. In the current answer, we only see how thered-componentwill be used, not how it is defined.
– ConnorsFan
Jan 19 at 16:53
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
add a comment |
In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -
<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>
- https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
Can we see thered-componentHTML template that would allow to do that?
– ConnorsFan
Jan 19 at 16:47
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the namedng-contentin thered-componenttemplate. In the current answer, we only see how thered-componentwill be used, not how it is defined.
– ConnorsFan
Jan 19 at 16:53
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
add a comment |
In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -
<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>
- https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -
<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>
- https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
answered Jan 19 at 16:40
Pardeep JainPardeep Jain
39k16102139
39k16102139
Can we see thered-componentHTML template that would allow to do that?
– ConnorsFan
Jan 19 at 16:47
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the namedng-contentin thered-componenttemplate. In the current answer, we only see how thered-componentwill be used, not how it is defined.
– ConnorsFan
Jan 19 at 16:53
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
add a comment |
Can we see thered-componentHTML template that would allow to do that?
– ConnorsFan
Jan 19 at 16:47
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the namedng-contentin thered-componenttemplate. In the current answer, we only see how thered-componentwill be used, not how it is defined.
– ConnorsFan
Jan 19 at 16:53
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
Can we see the
red-component HTML template that would allow to do that?– ConnorsFan
Jan 19 at 16:47
Can we see the
red-component HTML template that would allow to do that?– ConnorsFan
Jan 19 at 16:47
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
It should, you can pass as many components as named ng-content and display as per requirements
– Pardeep Jain
Jan 19 at 16:50
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the named
ng-content in the red-component template. In the current answer, we only see how the red-component will be used, not how it is defined.– ConnorsFan
Jan 19 at 16:53
Sorry, maybe my question was not clear. I was wondering if you could show in the answer how to define the named
ng-content in the red-component template. In the current answer, we only see how the red-component will be used, not how it is defined.– ConnorsFan
Jan 19 at 16:53
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
@ConnorsFan read here with example blog.angular-university.io/angular-ng-content/…
– Pardeep Jain
Jan 19 at 17:43
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%2f54269036%2fangular-6-best-way-to-implement-complex-template%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
