How to pass context to Angular 5 template from *ngIf
Actually you can input your condition into ngTemplateOutlet (and get rid of ngIf).
<ng-container *ngTemplateOutlet="condition ? template1 : template2; context: {$implicit: 'World'}"></ng-container>
The accepted answer works when you have a single expression but will get complex where you have multiple ngIf expressions and templates.
A full example for cases where you have multiple expressions, resulting templates and even different context variables:
<!-- Example ngFor --><mat-list-item *ngFor="let location of locations$; let l = index" [ngSwitch]="location.type" > <!-- ngSwitch could be ngIf on each node according to needs & readability --> <!-- Create ngTemplateOutlet foreach switch case, pass context --> <ng-container *ngSwitchCase="'input'"> <ng-container *ngTemplateOutlet="inputField; context: { location: location, placeholder: 'Irrigation Start', otherOptions: 'value123' }"> </ng-contaier> </ng-container> <ng-container *ngSwitchCase="'select'"> <ng-container *ngTemplateOutlet="selectField; context: { location: location, selectSpecificOptions: 'scope.someSelectOptions' }"> </ng-contaier> </ng-container> <!-- ngSwitchCase="'others'", etc. --></mat-list-item><!-- Shared ngTemplates & note let-[variable] to read context object into scope --><ng-template #inputField let-location="location" let-placeholder="placeholder let-otherOptions="otherOptions" <!-- Context is now accessible using let-[variable] --> INPUT: {{ location.value }} {{ placeholder }} {{ otherOptions }}</ng-template><ng-template #selectField let-location="location" let-options="selectSpecificOptions" <!-- Context is now accessible using let-[variable] --> SELECT: {{ location.value }} {{ options }}</ng-template>
Where;
location$ = [ {type: 'input', value: 'test'}, {type: 'input', value: 'test 2'}, {type: 'select', value: 'test 3'}];