There are various ways you can apply conditions on Angular Template. Usually, you apply conditions to show a particular value or render a specific element based on a condition.
In this post, let us see, the simplest way of achieving the conditions in Angular Template using the <ng-container> and <ng-template>. To start with consider data,
getData() {
return [
{
Id: '1',
Title: 'Azure Cetfication',
Medium:
{
online: 1000,
university: 9000
}
},
{
Id: '2',
Title: 'Angular Cetfication',
Medium:
{
online: 1000
}
},
{
Id: '3',
Title: 'JavaScript Cetfication',
Medium:
{
university: 9000
}
},
{
Id: '4',
Title: 'React Cetfication',
Medium:
{
online: 8000,
university: 4000
}
}
]
}
You can display above data in Angular as below,
<table>
<tr *ngFor="let d of data">
<td>
{{d.Id}}
</td>
<td>
{{d.Title}}
</td>
<td>
online: {{d.Medium.online}}
university:{{d.Medium.university}}
</td>
</tr>
</table>
Now, let us say you have a requirement,
- If for medium property online value is available, always show online
- If for medium property online value is not available, then show university
- If for medium property both online and university value is available, show online
As you see in the data, for some row’s medium field both online and university is available, and for some either of them. You can achieve above requirement of conditional templating as below,
<ng-container *ngIf="d.Medium.online; then onlinedata else universitydata">
</ng-container>
<ng-template #onlinedata>
online : {{d.Medium.online}}
</ng-template>
<ng-template #universitydata>
university : {{d.Medium.university}}
</ng-template>
Above we are using <ng-container> and inside that rendering a specific <ng-template> on a condition. So, if online value is available, Angular renders template #onlinedata, else it renders template #universitydata
You can also put a condition in the interpolation used inside the <ng-template>. And why you need that? To understand, let us tweak the requirement a little bit.
Now the requirement is to show the Medium, which has lesser price. So online value is less than university show that and vice versa. You can achieve that as below,
<ng-container *ngIf="d.Medium.online < d.Medium.university; then onlinedata else universitydata">
</ng-container>
<ng-template #onlinedata>
online : {{d.Medium.online?d.Medium.online:d.Medium.university}}
</ng-template>
<ng-template #universitydata>
university : {{d.Medium.university?d.Medium.university:d.Medium.online}}
</ng-template>
Above, we are using conditions in the interpolation. So, in this way you can apply conditions on a template. Putting everything together, above data can be rendered in a table with conditions as below,
<table>
<tr *ngFor="let d of data">
<td>
{{d.Id}}
</td>
<td>
{{d.Title}}
</td>
<td>
<ng-container *ngIf="d.Medium.online < d.Medium.university; then onlinedata else universitydata">
</ng-container>
<ng-template #onlinedata>
online : {{d.Medium.online?d.Medium.online:d.Medium.university}}
</ng-template>
<ng-template #universitydata>
university : {{d.Medium.university?d.Medium.university:d.Medium.online}}
</ng-template>
</td>
</tr>
</table>
I hope you find this post useful. Thanks for reading.
Dhananjay Kumar 
Leave a comment