Use a component as element - Angular 8

Question

I would like to use a component as an item.
Instead of using:

<ul class='biblList'>
    <li *ngFor="let biblCit of biblCits">
        {{ biblCit }}
    </li>
</ul>

I would like to use something like:

<evt-bibliography-item *ngFor="let biblCit of biblCits">
    {{ biblCit }}
</evt-bibliography-item>

Being a novice with angular I don't know how to figure it out.

I tried creating an empty component and calling it with a tag, but it is clearly incomplete code. — Memmo, Dec 16 '19 at 09:25
https://stackoverflow.com/questions/35562626/outputting-array-of-components-in-angular-2/35567656 — Surjeet Bhadauriya, Dec 16 '19 at 09:34

score 1 · Answer 1 · answered Dec 16 '19 at 09:27

1

here is working example

.ts

biblCits=['1','2','2','3','4','5']

.html

<div *ngFor="let biblCit of biblCits">
    <child-component [parentTimerCount]="biblCit">
    </child-component>
</div>

answered Dec 16 '19 at 09:27

Chanaka Weerasinghe

5,404
2
26
39

StepUp · Answer 2 · 2019-12-16T09:29:08.940

0

You can use iterator *ngFor to iterate through components:

<ng-content *ngFor="let biblCit of biblCits">
  <evt-bibliography-item></evt-bibliography-item>
</ng-content>

edited Dec 16 '19 at 09:29

answered Dec 16 '19 at 09:23

StepUp

36,391
15
88
148

1

@downvoter what's reason to downvote? It would be really helpful to improve my reply – StepUp Dec 16 '19 at 09:29
`evt-bibliography-item` is not a known element – Memmo Dec 16 '19 at 10:38
@Memmo it looks like you've not imported your component. – StepUp Dec 16 '19 at 10:42
1

in `app.module` or elsewhere? – Memmo Dec 16 '19 at 10:44
if it is standalone component, then yeah, import into `app.module.ts` – StepUp Dec 16 '19 at 10:46

Muhammed Albarmavi · Accepted Answer · 2019-12-16T14:56:45.013

0

you can use <ng-content></ng-content> at the component template and this will project the template from the parent

bibliography component template

<div>
<ng-content></ng-content>
</div>

parent

<app-bibliography *ngFor="let biblCit of biblCits">
         {{ biblCit }} 
</app-bibliography>

demo

edited Dec 16 '19 at 14:56

answered Dec 16 '19 at 09:27

Muhammed Albarmavi

23,240
8
66
91

@downvoter what's reason to downvote? It would be really helpful to improve my reply – Muhammed Albarmavi Dec 16 '19 at 11:07
For me it was the right solution! I had to read between the lines, but in the end I realized it was what I was looking for! – Memmo Dec 17 '19 at 11:47
1

@Memmo happy to hear that my answer solve your problem , thanks – Muhammed Albarmavi Dec 17 '19 at 12:08

score 0 · Answer 4 · answered Dec 16 '19 at 09:27

You can use <ng-content></ng-content> inside of your evt-bibliography-item component's template to access everything passed between your own component tags, in your case the value of {{ biblCit }}

@Component({
  selector: 'evt-bibliography-item',
    template: '<ng-content></ng-content>'
})
export class BibliographyItem {
}

Use a component as element - Angular 8

4 Answers4