CODEWITHSUNDEEP
htmlangulartypescript
Sonu Mishra
Sonu Mishra

Reputation: 1779

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

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[].

Upvotes: 0

Views: 1742

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222572

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

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

Upvotes: 3

Related Questions