CODEWITHSUNDEEP
htmlcssangular
Madhavan Sundararaj
Madhavan Sundararaj

Reputation: 277

How to list dynamic data one below the other in HTML? (MEAN)

I get an array of data from the backend and want to display them one below the other via HTML. Is there any way to do this? I have provided my current code below.

TS:

 this.sub = this.route.params.subscribe(params => {
  this.http.get<Organization>('/api/organization/get-details', {
    params: {
      username: params.orgUsername
    }
  })
  .subscribe(organization => {
      this.organization = organization['orgDetail'];
      this.users = organization['usernames'];

this.users will contain list of usernames and I want to display it one below another.

HTML code:

<span style="display:flex; margin-top: 10px;">
          <mat-icon style="font-size:20px;">person</mat-icon>{{users}}</span>

Expected output:

username1

username2 ..

Upvotes: 0

Views: 163

Answers (1)

MonkeyScript
MonkeyScript

Reputation: 5121

Iterate over the array and display each,

<span style="display:flex; margin-top: 10px;" *ngFor="let user of users">
    <mat-icon style="font-size:20px;">person</mat-icon>{{user}}
</span>

Upvotes: 2

Related Questions