Using Angular component by json data

Question

I have a lot of card component they are different type. I am getting data of card list from a json array.

[ 
   {id: 1, type: "flower"}, 
   {id: 2, type: "tree"}, 
   {id: 3, type: "animal"}
]

And I have created Angular components of these types:

<flower></flower>
<tree></tree>
<animal></animal>

So I want to add these as dynamically in my app.componnet.html template.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data: any;

  ngOnInit(){
    this.data = [ 
       {id: 1, type: "flower" }, 
       {id: 2, type: "tree" }, 
       {id: 3, type: "animal" }
    ];
  }
}

my json data comes from server.

Yash Rami · Accepted Answer · 2019-07-04 08:51:16Z

1

you can simply try *ngIf like this.

TS

jsonData = [ 
   {id: 1, type: "flower"}, 
   {id: 2, type: "tree"}, 
   {id: 3, type: "animal"}
];

HTML

<div *ngFor="let data of jsonData; let i = index">
   <flower *ngIf="data.type == flower"></flower>
   <tree *ngIf="data.type == tree"></tree>
    <animal *ngIf="data.type == animal"></animal>
</div>

answered Jul 4, 2019 at 8:51

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

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

Comments

riorudo · Accepted Answer · 2019-07-04 08:50:25Z

1

Try NgSwitch like:

<container-element [ngSwitch]="type">
  <some-element *ngSwitchCase="flower">...</some-element>
  <some-element *ngSwitchCase="tree">...</some-element>
  <some-element *ngSwitchCase="animal">...</some-element>
</container-element>

answered Jul 4, 2019 at 8:50

riorudo

1,25711 silver badges20 bronze badges

2 Comments

barteloma Over a year ago

Using ngFor loop?

riorudo Over a year ago

You can wrap the ngSwitch elements with a ngFor. Like the answer of Askirkela

Askirkela · Accepted Answer · 2019-07-04 08:51:03Z

0

You could use ngSwitch.

<div *ngFor="let d of data">
  <ng-container [ngSwitch]="d.type">
    <tree *ngSwitchCase="'tree'"></tree>
    <flower *ngSwitchCase="'flower'"></flower>
    <animal *ngSwitchCase="'animal'"></animal>
  </ng-container>
</div>

answered Jul 4, 2019 at 8:51

Askirkela

1,21911 silver badges20 bronze badges

1 Comment

barteloma Over a year ago

Multiple div tags will be added in this stuation. Can I change div with ng-container

Collectives™ on Stack Overflow

Using Angular component by json data

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Related