What is best way to apply ngif directive to <li> element?

I have a structure like this:

class GrandParent{
  childsOfGrandParent: Parent[];
}

class Parent{
  child: Child;
}

class Child{
 x:number
 y:number
 z:number
}

If we have object like this in .ts

  grandParent: GrandParent[] = [];

and in html:

<ul *ngFor="let parent of grandParent.childsOfGrandParent; let i = index;">

      <li  *ngIf="parent.child"> 
           {{child.x}}</li>
      <li  *ngIf="parent.child"> 
           {{child.y}}</li>
      <li  *ngIf="parent.child"> 
           {{child.z}}</li>

    </ul>

What should I do if we do not want to repat ngIfs int this structure?

1 answer

  • answered 2019-06-24 09:29 Maryannah

    <ng-container *ngIf="parent.child">
          <li>{{child.x}}</li>
          <li>{{child.y}}</li>
          <li>{{child.z}}</li>
    </ng-container>