I have a Component with template:
<some-component>
<div>some stuff </div>
</some-component>
How can I get data passed into Component and push them into some place in template?
Add a comment
|
1 Answer
YOu can use <ng-content></ng-content> for the same.
in some-component use ng-content like this :-
@Component({
selector: 'some-component',
template: `left <ng-content></ng-content> right`,
})
class SomeComponent {}
@Component({
selector: 'my-app',
template: `<some-component>INSERTED</some-component>`,
directives: [some-component],
})
class MyApp {}
Basically, <ng-content></ng-content> is like transclude from Angular 1.
you can also use more than one ng-content in a single component by using named ng-content
like this :-
<child-select>
<section>Section Content</section>
<div class="class-select">
div with .class-select
</div>
<footer>Footer Content</footer>
<header>Header Content</header>
</child-select>
in order to use this in the child-select component you have to specify in the template like this:-
<div style="border: 2px solid red; padding: 1rem; margin: 2px;">
<h4>Child Component with Select</h4>
<div style="border: 2px solid orange; padding: 1rem; margin: 2px">
<ng-content select="header"></ng-content>
</div>
<div style="border: 2px solid green; padding: 1rem; margin: 2px">
<ng-content select="section"></ng-content>
</div>
<div style="border: 2px solid pink; padding: 1rem; margin: 2px">
<ng-content select=".class-select"></ng-content>
</div>
<div style="border: 2px solid purple; padding: 1rem; margin: 2px">
<ng-content select="footer"></ng-content>
</div>
</div>
here is working plnker Working Plunker
6 Comments
Illorian
Is there any way to know whether the data is transferred to?
Pardeep Jain
sorry dont get you what you want to say ?
Illorian
Yeah, my English is bad) How could Component know that someone push data insert?
Pardeep Jain
Its the syntax of angular2 ? what do you mean by ` How could Component know that someone push data insert?`
Illorian
Hmmm... Is there way to know is ng-content empty or not?
|