Display each element of a list in a separate line in an Angular2 component

Question

I have an Angular2 component to display the list of speakers in some data. When I put the following code in my xyz.component.html, it displays the list as comma separated strings. How can I display each one in a different line -- essentially put a line break after every one.

<div *ngIf="data.speakers">
    <span class="attr-key">Speakers:</span><br>
    <span class="attr-value">{{data.speakers}}</span>
</div>

data is what comes due to binding. It has an element called speakers that is defined as string[].

can you list your data.speakers you need to use ngFor instead of ngIf — Rahul Singh
– Rahul Singh, Commented Aug 19, 2017 at 8:32

Sajeetharan · Accepted Answer · 2017-08-19 08:45:39Z

3

You need to use ngFor to loop over data and display it

<ul>
    <li *ngFor="let speaker of data.speakers">
      {{ speaker}}
    </li>
</ul>

answered Aug 19, 2017 at 8:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Rahul Singh Over a year ago

how do u know about the data ? atleast wait for the data :P

Rahul Singh Over a year ago

he is not quite sure of it i guess that is why i posted the comment

Collectives™ on Stack Overflow

Display each element of a list in a separate line in an Angular2 component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related