Using Typescript Variable to create img src

user_17219192 0
Viewed 747

I have an array which contains a list of categories, below is an example of one category: description: "test"

[0]
    icon: "assets/images/test1"
    name: "test"
[1]
    icon: "assets/images/test2.png"
    name: "test 2"

I am trying to loop through this array and display both the category name and the icon, however, displaying the icon isn't working.

<ng-container *ngFor="let category of this.categories>
   {{category.name}}  
   <img src={{category.icon}}/>               
</ng-container>

Does anyone know how to do this? Thanks

angular typescript html
1 Answers

I'm not an angular expert, but shouldn't you use the [] syntax for property binding?

E.g.:

<ng-container *ngFor="let category of this.categories">
   {{category.name}}  
   <img [src]="category.icon"/>               
</ng-container>

Also, you're missing a " at the end of categories.

user_21490930
Related