How to add Angular component content dynamically?

Question

I want to crate a nested layer.

@Component({
    selector: 'items-collection',
    template: '<ng-content></ng-content>'
})
export class ItemsComponent {
}

HTML usage is like this:

<items-collection>
    <item [name]="item-1"></item>
    <item [name]="item-2"></item>
    <item [name]="item-3"></item>
</items-collection>

But if I set a json source data of items-collection the data will append dynamically.

@Component({
    selector: 'items-collection',
    template: '<ng-content></ng-content>'
})
export class ItemsComponent {
    private jsondata:any[] = [
        {"name": "item-8"}, 
        {"name": "item-9"},
        {"name": "item-15"}
    ]
}

<items-collection source="jsondata">
    <item [name]="item-1"></item>
    <item [name]="item-2"></item>
    <item [name]="item-3"></item>
</items-collection>

Is this possible?

Why is *ngFor not useful in this case?

Francisco Santorelli
– Francisco Santorelli

2019-06-12 08:07:38 +00:00
Commented Jun 12, 2019 at 8:07 — Francisco Santorelli
– Francisco Santorelli, Commented Jun 12, 2019 at 8:07

khush · Accepted Answer · 2019-06-12 08:10:37Z

1

In ItemsComponent,

@Component({
    selector: 'items-collection',
    template: `<ng-container *ngFor=let data of jsonData">
                  <item [name]="data.name"></item>
              </ng-container>`
})  
export class ItemsComponent {
    @Input('source') jsonData: any[] = [];
}

And where you want to include item-collection,

In that component ts and html file include this code,

private jsondata:any[] = [
        {"name": "item-8"}, 
        {"name": "item-9"},
        {"name": "item-15"}
    ]


<items-collection [source]="jsondata">       
</items-collection>

answered Jun 12, 2019 at 8:10

khush

2,8072 gold badges18 silver badges36 bronze badges

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

Comments

Poul Kruijt · Accepted Answer · 2019-06-12 08:53:03Z

0

You can combine <ng-content> with a normal *ngFor:

@Component({
    selector: 'items-collection',
    template: `
      <ng-content></ng-content>
      <item *ngFor="let item of source" [name]="item.name"></item>
    `
})
export class ItemsComponent {
  @Input() source?: { name: string }[];
}

Make sure to use input binding

<items-collection [source]="jsondata">
    <item [name]="'item-1'"></item>
    <item [name]="'item-2'"></item>
    <item [name]="'item-3'"></item>
</items-collection>

edited Jun 12, 2019 at 8:53

answered Jun 12, 2019 at 8:10

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

1 Comment

Poul Kruijt Over a year ago

@khush if he wants some default items in the list

Collectives™ on Stack Overflow

How to add Angular component content dynamically?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related