სტრუქტურული დირექტივები *ngIf *ngFor

როდესაც ელემენტ ვუწერთ სტრუქტურულ დირექტივას ის იწყება ფიფქით * მაგალითად *ngIf მოცმეული შეთანხმება არის შემოკლებული ვარიანტი უფრო გრძელი ჩანაწერის.

ჩვეულებრივ როდესაც ვწერთ მაგალითად *ngIf-ს ან ნებისმიერ სტრუქტურულ დირექტივას ჩვენს ელემენტს გარშემო შემოერტყმება <ng-template> სელექტორი მაგალითად:

<div *ngIf="hero" class="name">{{hero.name}}</div>

ზემოთ მოეცმული კოდის ნიმუში გადაითარმგნება შემდეგნაირად

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ელემენტის დარენდერების დროს ყურადღება უნდა მივაქციოთ რომ ჩვენს დოკუმენტში არ დარენდერდება <ng-template> სლექტორი, მაგრამ დარენდერდება მასში მოქცეული div ელემენტი

*ngIf ის მაგალითზე ასევე შეგვიძლია განვიხილოთ *ngFor სტრუქტურული დირექტივა, ქვემოთ მოცემული მარტივი ჩანაწერი რეალურად გადაიქცევა შემდეგნაირად

შემოკლებული ჩანაწერი

<div
  *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById"
  [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

გრძელი ჩანაწერი

<ng-template ngFor let-hero [ngForOf]="heroes"
  let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">
    ({{i}}) {{hero.name}}
  </div>
</ng-template>