How to do communication between components
0
As per below image, say I've got two @Component(s):
MenuComponent
TableComponent
Both are ContainerComponent children.
MenuComponent fires an event (via EventEmitter) to "say" we want all the table rows selected. This event is catched at the ContainerComponent level.
What's the better strategy to let TableComponent know that it has to select all the rows of its table?
I could use the @ViewChild strategy, but I don't like direct components access. Any other idea?
angular events
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
add a comment |
0
As per below image, say I've got two @Component(s):
MenuComponent
TableComponent
Both are ContainerComponent children.
MenuComponent fires an event (via EventEmitter) to "say" we want all the table rows selected. This event is catched at the ContainerComponent level.
What's the better strategy to let TableComponent know that it has to select all the rows of its table?
I could use the @ViewChild strategy, but I don't like direct components access. Any other idea?
angular events
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
You may want to consider making it at least three (3) components. Another component wrapping the menu + table that can filter/sort/map data. Listening for events either through @Output or through a shared service.The child components could become more "dumb", simply taking in data and emitting events. For something like "select all", the parent/container component can use something likemap()to update a "selected" property for each "row" in the table.
– Alexander Staroselsky
Nov 13 '18 at 15:21
add a comment |
0
0
0
As per below image, say I've got two @Component(s):
MenuComponent
TableComponent
Both are ContainerComponent children.
MenuComponent fires an event (via EventEmitter) to "say" we want all the table rows selected. This event is catched at the ContainerComponent level.
What's the better strategy to let TableComponent know that it has to select all the rows of its table?
I could use the @ViewChild strategy, but I don't like direct components access. Any other idea?
angular events
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
As per below image, say I've got two @Component(s):
MenuComponent
TableComponent
Both are ContainerComponent children.
MenuComponent fires an event (via EventEmitter) to "say" we want all the table rows selected. This event is catched at the ContainerComponent level.
What's the better strategy to let TableComponent know that it has to select all the rows of its table?
I could use the @ViewChild strategy, but I don't like direct components access. Any other idea?
angular events
angular events
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
edited Nov 13 '18 at 15:17
LppEdd
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
asked Nov 13 '18 at 15:12
LppEddLppEdd
1,69411436
1,69411436
You may want to consider making it at least three (3) components. Another component wrapping the menu + table that can filter/sort/map data. Listening for events either through @Output or through a shared service.The child components could become more "dumb", simply taking in data and emitting events. For something like "select all", the parent/container component can use something likemap()to update a "selected" property for each "row" in the table.
– Alexander Staroselsky
Nov 13 '18 at 15:21
add a comment |
You may want to consider making it at least three (3) components. Another component wrapping the menu + table that can filter/sort/map data. Listening for events either through @Output or through a shared service.The child components could become more "dumb", simply taking in data and emitting events. For something like "select all", the parent/container component can use something likemap()to update a "selected" property for each "row" in the table.
– Alexander Staroselsky
Nov 13 '18 at 15:21
You may want to consider making it at least three (3) components. Another component wrapping the menu + table that can filter/sort/map data. Listening for events either through @Output or through a shared service.The child components could become more "dumb", simply taking in data and emitting events. For something like "select all", the parent/container component can use something like
map() to update a "selected" property for each "row" in the table.– Alexander Staroselsky
Nov 13 '18 at 15:21
You may want to consider making it at least three (3) components. Another component wrapping the menu + table that can filter/sort/map data. Listening for events either through @Output or through a shared service.The child components could become more "dumb", simply taking in data and emitting events. For something like "select all", the parent/container component can use something like
map() to update a "selected" property for each "row" in the table.– Alexander Staroselsky
Nov 13 '18 at 15:21
add a comment |
1 Answer
1
active
oldest
votes
1
Keep it simple
<app-container>
<app-menu #menu (selectAllRows)="table.selectAllRows($event)">
</app-menu>
<app-table #table>
</app-table>
</app-container>
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
That's basically equal to using@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?
– LppEdd
Nov 13 '18 at 15:17
1
Yeah but you're not using@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).
– trichetriche
Nov 13 '18 at 15:19
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
1
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
1
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
|
show 1 more 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
});
}
});
draft saved
draft discarded
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%2f53284018%2fhow-to-do-communication-between-components%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
1
Keep it simple
<app-container>
<app-menu #menu (selectAllRows)="table.selectAllRows($event)">
</app-menu>
<app-table #table>
</app-table>
</app-container>
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
That's basically equal to using@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?
– LppEdd
Nov 13 '18 at 15:17
1
Yeah but you're not using@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).
– trichetriche
Nov 13 '18 at 15:19
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
1
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
1
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
|
show 1 more comment
1
Keep it simple
<app-container>
<app-menu #menu (selectAllRows)="table.selectAllRows($event)">
</app-menu>
<app-table #table>
</app-table>
</app-container>
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
That's basically equal to using@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?
– LppEdd
Nov 13 '18 at 15:17
1
Yeah but you're not using@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).
– trichetriche
Nov 13 '18 at 15:19
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
1
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
1
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
|
show 1 more comment
1
1
1
Keep it simple
<app-container>
<app-menu #menu (selectAllRows)="table.selectAllRows($event)">
</app-menu>
<app-table #table>
</app-table>
</app-container>
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
Keep it simple
<app-container>
<app-menu #menu (selectAllRows)="table.selectAllRows($event)">
</app-menu>
<app-table #table>
</app-table>
</app-container>
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
answered Nov 13 '18 at 15:15
trichetrichetrichetriche
26k42152
26k42152
That's basically equal to using@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?
– LppEdd
Nov 13 '18 at 15:17
1
Yeah but you're not using@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).
– trichetriche
Nov 13 '18 at 15:19
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
1
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
1
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
|
show 1 more comment
That's basically equal to using@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?
– LppEdd
Nov 13 '18 at 15:17
1
Yeah but you're not using@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).
– trichetriche
Nov 13 '18 at 15:19
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
1
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
1
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
That's basically equal to using
@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?– LppEdd
Nov 13 '18 at 15:17
That's basically equal to using
@ViewChild, but the handling is delegated to the template. Do you think this is the only solution?– LppEdd
Nov 13 '18 at 15:17
1
1
Yeah but you're not using
@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).– trichetriche
Nov 13 '18 at 15:19
Yeah but you're not using
@ViewChild. And there's plethora of solutions (services, view children, injectors - if you're severely debilitated -, ...), most are explained here. But this one is hands down the easiest to implement, read, and use (according to myself).– trichetriche
Nov 13 '18 at 15:19
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
Thanks! I really don't need to have a service or to use injection to do this. It would be all boilerplate.
– LppEdd
Nov 13 '18 at 15:21
1
1
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
Well a service can be useful (again, that's my two cents) since it allows to easily share common behaviors. So if you have to write this once, use the code I provided, but if you have several instances of arrays that can have all of their rows selected, consider using either a service or a custom component with greater abstraction
– trichetriche
Nov 13 '18 at 15:23
1
1
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
No problem, that's why I'm here, good luck with your project
– trichetriche
Nov 13 '18 at 15:30
|
show 1 more comment
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53284018%2fhow-to-do-communication-between-components%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
You may want to consider making it at least three (3) components. Another component wrapping the menu + table that can filter/sort/map data. Listening for events either through @Output or through a shared service.The child components could become more "dumb", simply taking in data and emitting events. For something like "select all", the parent/container component can use something like
map()to update a "selected" property for each "row" in the table.– Alexander Staroselsky
Nov 13 '18 at 15:21