Директива ngIf позволяет удалить или, наоборот, добавить элемент при определенном условии. Например, определим следующий компонент:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<p *ngIf="condition">
                  Привет мир
                </p>
                <p *ngIf="!condition">
                  Пока мир
                </p>
                <button (click)="toggle()">Toggle</button>`
})
export class AppComponent {
 
    condition: boolean=true;
 
    toggle(){
        this.condition=!this.condition;
    }
}

В зависимости от значения свойства condition будет отображаться либо первый, либо второй параграф.

Мы можем задавать альтернативные выражения с помощью директивы ng-template. Так, предыдущий пример будет аналогичен следующему:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<p *ngIf="condition;else unset">
                  Привет мир
                </p>
                <ng-template #unset>  
                  <p>Пока мир</p>  
                </ng-template>   
                <button (click)="toggle()">Toggle</button>`
})
export class AppComponent {
 
    condition: boolean=true;
 
    toggle(){
        this.condition=!this.condition;
    }
}

Выражение *ngIf=«condition;else unset» указывает, что если condition равно false, то срабатывает блок <ng-template #unset>.

Либо можно определить более изощренную логику. Так, изменим шаблон компонента следующим образом:

template: ` <div *ngIf="condition; then thenBlock else elseBlock"></div>   
            <ng-template #thenBlock>Then template</ng-template>  
            <ng-template #elseBlock>Else template</ng-template>    
            <button (click)="toggle()">Toggle</button>`

В данном случае, если condition равно true, то отображается блок thenBlock, иначе отображается блок elseBlock.