nezhar
2/26/2018 - 7:07 PM

Angular 5 ngIf / else

*ngIf is a structural directive (structural directives start with a * and modify the dom structure) The others are called attribute directives

build-in-directives.html
content_copyfile_download
<p *ngIf="serverCreated; else noServer">Server was created, server name is {{ serverName }}!</p>
<ng-template #noServer>
    <p>No server was created!</p>
</ng-template>


<p 
    [ngStyle]="{'background-color': getColor()}"
    [ngClass]="{'online': serverStatus === 'online' }"
>The Server {{ serverId }} is {{ getServerStatus() }}!</p>


<app-server *ngFor="let server of servers"></app-server>


<!-- Sample -->
<button (click)="display = !display; addLog()">Display Details</button>
<p *ngIf="display">Secret Password = tuna</p>
<p 
  *ngFor="let log of logs; let i = index"
  [ngStyle]="{'background-color': (i>=5) ? 'blue': 'transparent'}"
  [ngClass]="{'advanced': i>=5}">{{ log }}</p>