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
– Memmo, Commented Dec 16, 2019 at 9:25

Chanaka Weerasinghe · Accepted Answer · 2019-12-16 09:27:12Z

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, 2019 at 9:27

Chanaka Weerasinghe

5,8002 gold badges31 silver badges42 bronze badges

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

Comments

Muhammed Albarmavi · Accepted Answer · 2019-12-16 14:56:45Z

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, 2019 at 14:56

answered Dec 16, 2019 at 9:27

Muhammed Albarmavi

24.6k9 gold badges72 silver badges92 bronze badges

3 Comments

Muhammed Albarmavi Over a year ago

@downvoter what's reason to downvote? It would be really helpful to improve my reply

Memmo Over a year ago

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!

Muhammed Albarmavi Over a year ago

@Memmo 🙂 happy to hear that my answer solve your problem , thanks 👍

Fussel · Accepted Answer · 2019-12-16 09:27:27Z

0

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 {
}

answered Dec 16, 2019 at 9:27

Fussel

1,8651 gold badge10 silver badges28 bronze badges

Comments

StepUp · Accepted Answer · 2019-12-16 09:29:08Z

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, 2019 at 9:29

answered Dec 16, 2019 at 9:23

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

5 Comments

StepUp Over a year ago

@downvoter what's reason to downvote? It would be really helpful to improve my reply

Memmo Over a year ago

evt-bibliography-item is not a known element

StepUp Over a year ago

@Memmo it looks like you've not imported your component.

Memmo Over a year ago

in app.module or elsewhere?

StepUp Over a year ago

if it is standalone component, then yeah, import into app.module.ts

Collectives™ on Stack Overflow

Use a component as element - Angular 8

4 Answers 4

Comments

3 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related