51 lines
1.5 KiB
Plaintext
51 lines
1.5 KiB
Plaintext
|
.l-main-section
|
||
|
p.
|
||
|
As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create
|
||
|
a top-level component. You add child components to a parent component by using them in the parent component's
|
||
|
template.
|
||
|
p.
|
||
|
Given a bootstrapping template with a <code><parent></code> tag in the body, you can create a parent
|
||
|
component that uses a <code><child></code> component like so:
|
||
|
|
||
|
pre.prettyprint.linenums.lang-dart
|
||
|
code.
|
||
|
part of making_components;
|
||
|
|
||
|
@Component(
|
||
|
selector: 'parent'
|
||
|
)
|
||
|
@View(
|
||
|
template: '''
|
||
|
<h1>{{ message }}</h1>
|
||
|
<child></child>
|
||
|
''',
|
||
|
directives: const[ChildComponent]
|
||
|
)
|
||
|
class ParentComponent {
|
||
|
String message = "I'm the parent";
|
||
|
}
|
||
|
|
||
|
p You then just need to write the <code>ChildComponent</code> class to make it work:
|
||
|
|
||
|
pre.prettyprint.linenums.lang-dart
|
||
|
code.
|
||
|
part of making_components;
|
||
|
|
||
|
@Component(
|
||
|
selector: 'child'
|
||
|
)
|
||
|
@View(
|
||
|
template: '''
|
||
|
<p> {{ message }} </p>
|
||
|
'''
|
||
|
)
|
||
|
class ChildComponent {
|
||
|
String message = "I'm the child";
|
||
|
}
|
||
|
|
||
|
p.
|
||
|
Notice that in addition to using the <code><child></code> element in the parent template, you also need to
|
||
|
add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives
|
||
|
p.
|
||
|
[TODO: Motivate communication between components with iterator example that passes index to the child]
|