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

You mean like this? <span>{{data.array.join(',')}}</span></div> - or did you want to loop through the array values with another *ngFor? — Kinglish
– Kinglish, Commented Dec 7, 2021 at 19:35

Connor Brown · Accepted Answer · 2021-12-07 19:41:31Z

3

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>

answered Dec 7, 2021 at 19:41

Connor Brown

1756 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

roberto tomás · Accepted Answer · 2021-12-07 19:37:14Z

0

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?

answered Dec 7, 2021 at 19:37

roberto tomás

4,7477 gold badges47 silver badges87 bronze badges

Comments

tuhin47 · Accepted Answer · 2021-12-08 03:37:30Z

0

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>

answered Dec 8, 2021 at 3:37

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Display array elements in angular template

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related