Angular. Structural directives *ngFor and *ngIf
In this tutorial we’ll consider Angular structural directives – *ngFor and *ngIf and the special directive ng-container
Angular has hot three kinds of directives
- structural – it changes DOM structure.
- attributes – it changes the element view/behaviour.
- components
Structural direcitves begin from * symbol. *ngIf directive shows content, if calculated condition is equal true. *ngFor directive renders data collections (arrays). ng-container let you not to use html tags in cases, where you need not use it.
Code lesson (component)
<button (click)="getUser()">{{title}}</button>
<p *ngIf="user">{{user.login}}</p>
<ng-container *ngIf="user">
<ul *ngFor="let role of user.roles">
<li>{{role}}</li>
</ul>
</ng-container>
0 Comments