Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to reuse <ng-content></ng-content> in component template? Angular2

I am curious is there any way to reuse twice ng-content in component? Or to assign it to variable inside component constructor?

Something like:

@Component({
    selector: "component"
})
@View({
    template: `<ng-content></ng-content> and again <ng-content></ng-content>`
})
like image 830
Vlado Tesanovic Avatar asked Dec 25 '15 09:12

Vlado Tesanovic


2 Answers

There is also an other way of doing it with the help of ng-template

Wrap the ng-content inside ng-template and use ngTemplateOutlet with ng-container

Example:

<ng-container *ngIf="YourCondition" *ngTemplateOutlet="content"></ng-container>
<ng-container *ngIf="!YourCondition" *ngTemplateOutlet="content"></ng-container>

<ng-template #content><ng-content></ng-content></ng-template>

Use this as,

<my-component>Anything</my-component>
like image 168
Naveen T P Avatar answered Oct 19 '22 23:10

Naveen T P


Yes, i also found this.

<my-component> <div content-a> A </div> </my-component>

and in component:

<ng-content select="[content-a]"></ng-content>
like image 40
Vlado Tesanovic Avatar answered Oct 20 '22 00:10

Vlado Tesanovic