How to add a space between ngFor array results

Issue

Can’t find an answer to this that works.

Simple *ngFor that returns an array:

<ul class="address>
  <li *ngFor="let address of census">
    {{address.occupants}}
  </li>
</ul>  

Seems so easy, BUT results look like:

John Smith,John Doe,John Brown  

Notice the lack of spacing between the results.

This is because “occupants” is an array in my data:

  {
    id: 1,
    occupants: ['John Smith', 'John Doe', 'John Brown'],
    address: '5 Johns Street',
  },

How do I use *ngFor to output the list of Johns with a space between each entry?

Solution

Try to use join pipe from angular-pipes
like this:

<ul class="address>
 <li *ngFor="let address of census">
   {{address.occupants | join: ' '}}
 </li>
</ul>  

Answered By – Messaoud Zahi

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.