xxxxxxxxxx
<!-- Alternative syntax -->
<ng-container
*ngTemplateOutlet="optionTemplate; context:{ $implicit: option, idx: i }"
></ng-container>
><Copy
xxxxxxxxxx
@Component({
selector: 'ng-template-outlet-example',
template: `
<ng-container *ngTemplateOutlet="greet"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
<hr>
<ng-template #greet><span>Hello</span></ng-template>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
<ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
myContext = {$implicit: 'World', localSk: 'Svet'};
}
xxxxxxxxxx
<!-- Define our template -->
<ng-template #myTemplate> World! </ng-template>
Hello
<!-- Render the template in this outlet -->
<ng-container [ngTemplateOutlet]="myTemplate"></ng-container>
<>Copy
xxxxxxxxxx
<li *ngFor="let item of items; index as i">
<!-- Setting the option as the $implicit property of our context along with the row index -->
<ng-container
[ngTemplateOutlet]="optionTemplate"
[ngTemplateOutletContext]="{ $implicit: option, idx: i }"
></ng-container>
</li>
<!-- selector.component.html --><>Copy
xxxxxxxxxx
<ng-template #optionTemplate let-option let-position="idx">
{{ position }} : {{option}}
</ng-template>
<!-- client-one.component.html --><>Copy