Append element in DOM from array

Question

I have:

<div *ngFor="let item of items">
  <h2>Hello {{item.name}}</h2>
</div>

My items:

items = [
    {
      name: 'David',
      star: 5
    },
    {
      name: 'George',
      star: 2
    },
    {
      name: 'Michael',
      star: 0
    },
    {
      name: 'Tim',
      star: 1
    },
]

They render:

Hello Tim

etc.

How to add:

<i class="fa fa-star"></i>

above h2 when in array:

star: 1

etc? Something like this:

if (this.items.star == 2) {
   <i class="fa fa-star"></i>
   <i class="fa fa-star"></i>
}

(It's just an example "if statement" to understand what's going on)

My PLUNKER: https://plnkr.co/edit/lfZT6FwenhYkQf1MUx9E?p=preview

TheUnreal · Accepted Answer · 2017-11-05 12:12:36Z

1

You can use the *ngIf template decorator this way:

<div *ngFor="let item of items">
  <i class="fa fa-star" *ngIf="item.star === 1></i>
  <h2>Hello {{item.name}}</h2>
</div>

See more examples and read more about it here

*ngIf: Conditionally includes a template based on the value of an expression.

answered Nov 5, 2017 at 12:12

TheUnreal

24.6k52 gold badges173 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

Append element in DOM from array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related