0

There are some static components on the page:

<app-com1  [attr.id]="'section_1'"></app-com1>
<app-com2  [attr.id]="'section_2'"></app-com2>
<app-com3  [attr.id]="'section_3'"></app-com3>
<app-com4  [attr.id]="'section_4'"></app-com4>

I have an array: let arr [1,2,3,4];

I need to get each value from arr and pass it to [attr.id] instead static data.

How to do that?

I can wrap it to loop, but I dont like it :

<ng-container *ngFor="let component of arr; let i = index">
      <app-com1 *ngIf="i == 0"  [attr.id]="i"></app-com1>
      ...etc
</ng-container>
Improve this question
4
  • app-com1, app-com2, ... app-com4 are the same component, right? If yes, just use *ngFor Commented Aug 3, 2020 at 12:56
  • No, different components Commented Aug 3, 2020 at 12:57
  • Are those different components going to be added for each array item? Commented Aug 3, 2020 at 13:04
  • Array has information about component, title, id, status. I need to show components by array list, in the same sequance passed id to ` [attr.id]` Commented Aug 3, 2020 at 13:06

2 Answers 2

Reset to default
1

You can do it through dynamic components working example

https://angular.io/guide/dynamic-component-loader

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

Comments

0

Try this

<ng-container *ngFor="let component of arr; let i = index">
      <app-com1 *ngIf="i == 0"  id="{{component}}"></app-com1>
      ...etc
</ng-container>
Improve this answer

Comments