0
194
ViewsPrint an array from a function inside Angular HTML
I'm doing an app where I print some cars (I receive them from the database) and in one column I have one string with multiple tags that are divided by commas, I made a function to receive that as an array of words and then print each word for make tags, but I don't really know how to call the function or how to do it because it's repeating multiple times when it shouldn't do that.
<!-- Category Card -->
<div *ngFor="let car of cars" class="col-md-4">
<div class="card-image-overlay m-auto" id="tags">
{{separar(car?.tags)}}
</div>
</div>
Then the code of the function "separar":
public separar(string) {
var palabras = [];
palabras = string.split(",");
for (var i = 0 ; i < palabras.length ; i++) {
document.getElementById("tags").innerHTML +=
("<span class='card-detail-badge'>" + palabras[i] + "</span>");
}
}
I'm getting this:
and it should only print 3 times those tags.
Probably is a mistake very easy but Im new to angular and my teacher doesn't know why it doesn't work. :(
2 answers
Answer question0
Try returning the HTML string from the template function instead.
Also, avoid common (sometimes "reserved") words for variables i.e use tagListStr instead of string.
public separar(tagListStr) {
return tagListStr
.split(",")
.map(tag => `<span class='card-detail-badge'>${tag}</span>`)
.join('');
}
0
Use ngFor to do it "the Angular way" 😉
getTags(tags: sring): string[] {
return tags.split(',');
}
<!-- Category Card -->
<div *ngFor="let car of cars" class="col-md-4">
<div class="card-image-overlay m-auto" id="tags">
<span class='card-detail-badge' *ngFor="let tag of getTags(car?.tags)">
{{tag}}
</span>
</div>
</div>