I need help with generating a span element for each saved tag in my collection's tag array using Firebase and *ngFor loop. Currently, I am getting one large span element with all tags separated by commas instead of individual spans for each tag. Is there a way to prevent this from happening? I have also created an interface for Saved. Thank you for any assistance.
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div *ngFor="let tag of saved.tags">
<span class="badge badge-pill badge-primary">{{tag}}</span>
</div>
<hr /> <a href="#" class="btn btn-primary offset-4 col-md-4">View</a>
</div>
</div>
//Saved interface in Saved.ts file
export interface Saved {
id: string;
title: string;
tags: string[];
}