ng template if else code example

Example 1: ngif else

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

Example 2: ng if else

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Example 3: ngif using multiple elseif

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

Example 4: ngIf else

content_copy
      
      <div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Example 5: ngif

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
export class NgIfElse {
  show: boolean = true;
}

Example 6: ng elseif

<ng-container *ngIf="tipo_template === 0">
     <!-- Conteúdo 0 aqui -->
</ng-container>

<ng-container *ngIf="tipo_template === 1">
     <!-- Conteúdo 1 aqui -->
</ng-container>

<ng-container *ngIf="tipo_template === 2">
     <!-- Conteúdo 2 aqui -->
</ng-container>