Here is a simple example of how to use *ngIf in Angular.

Component:


oddNumbers
= [1, 3, 5, 7, 9];
evenNumbers = [0, 2, 4, 6, 8];
onlyOdd = false;

oddText = 'odd';
evenText = 'even';

View:

<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary" (click)="onlyOdd = !onlyOdd">Only show
<span *ngIf="!onlyOdd">{{oddText}}</span> <span *ngIf="onlyOdd">{{evenText}}</span> numbers
</button>
<br><br>
<ul class="list-group">
<div *ngIf="onlyOdd">
<h5>Odd numbers</h5>
<li class="list-group-item" *ngFor="let odd of oddNumbers">
{{ odd }}
</li>
</div>
<div *ngIf="!onlyOdd">
<h5>Even numbers</h5>
<li class="list-group-item" *ngFor="let even of evenNumbers">
{{ even }}
</li>
</div>
</ul>
</div>
</div>
</div>