In web application development in Angular, we may come up with a situation where we may need to display information based on some conditions. For this purpose, we can use ng-template. However, we may also require to pass data to ng-template; so that, a different type of output is displayed.

Following example shows this scenario:

<div>
<ng-container *ngTemplateOutlet="myTemplate, context:{$implicit: dataForTemplate, extraInfo: extraInfo } ">
</ng-container>
</div>

<ng-template #myTemplate let-data let-extraInfo="extraInfo">
{{data.showName? data.name: ''}}
{{
data.showAddress? data.address: ''}}
{{
extraInfo.value}}
</ng-template>

--

--