How to iterate dictionary in angular template?
You can create a pipe that maps the object (dictionary) to an array
containing of type : { key: string,value: any }
Somthing like this:
@Pipe({name: 'mapToArray'})
export class MapToArray implements PipeTransform {
transform(value, args:string[]) : any {
let arr = [];
for (let key in value) {
arr.push({key: key, value: value[key]});
}
return arr;
}
}
and use it like that in the html file:
<span *ngFor="let item of content | mapToArray">
Key: {{item.key}}, Value: {{item.value}}
</span>
You can use the built-in keyvalue pipe like this:
<span *ngFor="let item of content | keyvalue">
Key: {{item.key}}, Value: {{item.value}}
</span>