Specifically, what are parent components and child components , hate it that all tutorials , documentations brush over this, Am making an angular 2 app and have the basic understanding of what components are however when reading on how to pass data between components all references refer to "child/parent component interaction" which one cannot get well if as for my case i do not know the difference between the two.
@Input() and @Output() allow Angular to share data between the parent context and child directives or components. An @Input() property is writable while an @Output() property is observable.
A parent component is a component that has a wider scope and a child component is a component that is apart of that scope but not all of it. One example is an html page that has a toolbar, a content area and a table inside the content area.
If we look at a pseudo html it looks like:
<html>
<toolbar></toolbar>
<content>
<table></table>
</content>
</html>
Looking at this we say content
is a parent component that has a child of table
and toolbar
is a sibling to content
.
Let's say that content
has some data that it wants to pass down to render in table
then in the parent component (content) you would write the necessary logic to get that data bind it to a variable then in the html template property bind that variable to table
so it can be rendered.
Pseudo html again:
<html>
<content>
<table [tableData]="contentData"></table>
</content>
</html>
Hope this is clear and helps
A parent component is like a container for child components. A child component is a more specific part inside a parent component. Example would be a parent component being a PERSON. ARMS and LEGS are child components of it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With