Display array elements in angular template

Question

I'm trying to display values of an array from a *ngFor

const blockData = [
    {text: sampleText1, array: [val1]},
    {text: sampleText2, array: [val2, dat2]},
    {text: sampleText3, array: [val3, dat3]}
]

<div *ngFor="let data of blockData">{{data.text}} 
<span>{{data.array}}</span></div>

How to display my both data.array values in my span

Answer 1

You can use ng-container and loop inside of your initial loop. Make sure that you clean up your blockData array and wrap the values inside quotes.

<div *ngFor="let data of blockData">{{data.text}} 
    <span>
        <ng-container *ngFor="let item of data.array"> - {{item}} - </ng-container>
    </span> 
</div>

Answer 2

const blockData = [
    {text: sampleText1, array: [val1]},
    {text: sampleText2, array: [val2, dat2]},
    {text: sampleText3, array: [val3, dat3]}
]

<div *ngFor="let data of blockData">{{data.text}} 
<span *ngFor="let val of data.array">{{val}}</span>
</div>

Can't you do this?

Answer 3

You can use json pipe for that

const blockData = [
    {text: sampleText1, array: [val1]},
    {text: sampleText2, array: [val2, dat2]},
    {text: sampleText3, array: [val3, dat3]}
]

<div *ngFor="let data of blockData">{{data.text}} 
<span>{{data.array | json}}</span></div>