ngFor in Angular making 5 divs and 5 uls -- instead of inside items

Question

The question is surprising behavior of ngFor and loopings items generated inside it.

I am making a simple example to refer *ngFor in Angular4/5/6. The issue is that I was expecting 1 div to contain 5 paragraph. I am amazed to see that I am getting instead 5 divs each containing 1 paragraph. Why is this and how to fix this? I am surprised same is happening for ul-li items also !!! -- strange.

abc.component.html

 <div *ngFor="let x of students">
   <p>{{x.name}}, {{x.age}}, {{x.country}}, {{x.gender}}</p>
 </div>

abc.component.ts

  students = [
    {name: "Jack", age: 29, gender:"male", country: "USA"},
    {name: "Ronald", age: 33, gender: "male", country: "UK"},
    {name: "Lisa", age: 19, gender: "female", country: "UK"},
    {name: "Donald", age: 43, gender: "male", country: "Austrailia"},
    {name: "Simera", age: 23, gender: "female", country: "Italy"}
  ];

abc.component.css

div{border:1px solid black;}

Even for ul-li (I am getting ul generated 5 times containing 1 li item in each)

<ul *ngFor="let x of students">
  <li>{{x.name}}, {{x.age}}</li>
</ul>

Answer 1

Put your ngFor on <p> tag instead of <div> which will create 5 paragraph in one div.Like following:

<div>
   <p *ngFor="let x of students">{{x.name}}, {{x.age}}, {{x.country}}, {{x.gender}}</p>
 </div>

Answer 2

You need to put *ngFor inside paragraph tag

<div>
   <p *ngFor="let x of students">
      {{x.name + ', ' + x.age + ', '+ x.country + ', '+ x.gender}}
   </p>
</div>

Answer 3

Please review carefully 2 code snipped:

//1

 <div *ngFor="let x of students">
   <p>{{x.name}}, {{x.age}}, {{x.country}}, {{x.gender}}</p>
 </div>

//2

<ul ngFor="let x of students>
  <li>{{x.name}}, {{x.age}}</li>
</ul>

In 1: You wrote: *ngFor="..."

In 1: You wrote: ngFor="..." You must rewrite to: *ngFor="..."

Hope to helpful!