I received a JSON response structured like this:
{
_id: '5dd0d0dc4db1cf9c77781aaa',
picture: 'http://placehold.it/32x32',
name: 'Graciela Mcmahon',
guid: '98c0fcc2-1dfc-4974-bdae-d8263d783e0a',
star:
'<mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star_half</mat-icon><mat-icon>star_border</mat-icon><mat-icon>star_border</mat-icon>',
}
However, when I tried to render the star icon, it did not display as expected. Here is the code snippet from my component:
<owl-carousel-o [options]="listingSliderOptions" class="row">
<ng-container *ngFor="let listing of listingJson">
<ng-template carouselSlide [id]="listing._id">
<a [routerLink]="['/']" class="listing-grid-item">
<figure>
<img src="{{listing.picture}}" alt="" />
<div class="info">
<div class="cat_star" [innerHTML]="listing.star">
</div>
<h3>{{listing.name}}</h3>
</div>
</figure>
</a>
</ng-template>
</ng-container>
</owl-carousel-o>
The displayed output can be seen in the following screenshot: https://i.sstatic.net/YbmiJ.png
I'm wondering if this is the correct way to display the content, or should I possibly generate the tags inside the Angular component?
Expected Result: