Angular. Structural directives *ngFor and *ngIf

Home » Tutorials » JavaScript » 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

Submit a Comment

Your email address will not be published. Required fields are marked *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This