How to add a space between ngFor array results


Can’t find an answer to this that works.

Simple *ngFor that returns an array:

<ul class="address>
  <li *ngFor="let address of census">

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?


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

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

Answered By – Messaoud Zahi

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.