CODEWITHSUNDEEP
javascripthtmlangular
imPK
imPK

Reputation: 884

Display array elements in angular template

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

Upvotes: 1

Views: 4377

Answers (3)

tuhin47
tuhin47

Reputation: 6068

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>

Upvotes: 0

Connor Brown
Connor Brown

Reputation: 175

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>

Upvotes: 3

roberto tom&#225;s
roberto tom&#225;s

Reputation: 4697

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?

Upvotes: 0

Related Questions