angular template to iterate over array or show single element

Question

Some custom components are part of an angular 7 app. Following pattern is common in the components where child components expect either a single value or an array. Depending on a flag, the component renders the required layout. Following is an example:

<ng-container *ngIf="!arrayFlag">
    <app-some-component ... >
        ...
    </app-some-component>
</ng-container>
<ng-container *ngIf="arrayFlag">
  <app-some-component ...
    *ngFor="let field of fields; let i = index; trackBy:trackByFn">
        ...
  </app-some-component>
</ng-container>

Can we simplify this pattern in such a way that the content of component need not be written twice, once for array and once for single value. e.g.

<ng-container ... >
  <app-some-component ... >
        ...
  </app-some-component>
</ng-container>

Regards

score 1 · Accepted Answer · 2019-06-04 14:16:17Z

1

If your components are "dumb" like this (they don't hold any logic, you can maybe use templates :

<ng-template #child let-arr>
  <child-component *ngFor="let i of arr"></child-component>
</ng-template>

<ng-container *ngTemplateOutlet="child; context: { arr: flag ? [0] : myArray }"></ng-container>

EDIT Done way simpler :

<app-some-component 
  *ngFor="let field of (flag ? fields : [0]); let i = index; trackBy:trackByFn">
</app-some-component>

edited Jun 4, 2019 at 14:16

answered Jun 4, 2019 at 13:51

user4676340

Sign up to request clarification or add additional context in comments.

2 Comments

Tech Agent Over a year ago

Thanks for the answer. I will try to use it.

user4676340 Over a year ago

@TechAgent done something simpler, feel free to check it out

Collectives™ on Stack Overflow

angular template to iterate over array or show single element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related