Angular - Displaying array as list in frontend

Question

I'm working on my web-app and I am facing a problem.

I have an array with several values, which I'd like to display in the frontend as list or something similar.

app.component.ts

in this function I split the tags from the string into an array

splitTags() {
  if (this.data.tags != null) {
    var tag = this.data.tags.split(";")
    console.log(tag)
  }
}

ngOnInit() {
  this.splitTags()
}

app.component.html

here I d'like to display the tags in a list

<li *ngFor="let tag in tags">
  {{ tag }}
</li>

but nothing appears, also if I see the values in the console.

You need to use of not in: <li *ngFor="let tag of tags"> — Andrei Tătar
– Andrei Tătar, Commented Apr 8, 2020 at 8:10
@AndreiTătar yes and there is another error he don't store the result of split method in a componenet property 👍 — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Apr 8, 2020 at 8:15

Muhammed Albarmavi · Accepted Answer · 2020-04-08 08:11:32Z

1

you need to create a property to hold the split result

tags:any[]; // 1️⃣

splitTags() {
  if (this.data.tags != null) {
    this.tags = this.data.tags.split(";"); // 2️⃣
    console.log(this.tags)
  }
}

ngOnInit() {
  this.splitTags()
}

template

<li *ngFor="let tag of tags">
  {{ tag }}
</li>

answered Apr 8, 2020 at 8:11

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

2 Comments

macintosh11 Over a year ago

@malbaravi - I've an other question: I added now a limit of 5 in my list. But sometimes there are more than 5 values in that array. How can I add a button "show all" and then display everything in that list?

Muhammed Albarmavi Over a year ago

@macintosh11 check this demo stackblitz.com/edit/angular-sbck7s may help 👍

Collectives™ on Stack Overflow

Angular - Displaying array as list in frontend

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related