How to display array item in Angular

Question

I am a newbie in Angular, I create an array but I have problem to display it.

When I display the array item it is blank.

write.component.html:


    <div class="data">
        <li> Name: <input type="text" [(ngModel)]="name" placeholder="Please enter Name" ></li>
        <li> Age:<input type="text" [(ngModel)]="age" placeholder="Please enter Age" class="age"></li>
        <li>College:<input type="text" [(ngModel)]="college" placeholder="Please enter College" ></li>
        </div>

    <h2>Student</h2>
    <ul class="details">
      <li>
        <span class="badge" *ngFor="let student of students">  // display array item
          {{student.name}}{{student.age}}{{student.college}}</span>
      </li>
    </ul>

.ts

export class WriteComponent implements OnInit {
  name : string;
  age : number;
  college : string;

students : Array<any>; // declare array

}

write-service.ts

import { Injectable } from "@angular/core";


@Injectable()
export class HomeService {

  private students = new Array<any>( //array details
    {
      name:"dwq",
      age:12,
      college:"2321"
    }
  )
}

did you inject the service ?

Muhammed Albarmavi
– Muhammed Albarmavi

2020-02-21 02:18:23 +00:00
Commented Feb 21, 2020 at 2:18 — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Feb 21, 2020 at 2:18
check this demo stackblitz.com/edit/angular-orrsud

Muhammed Albarmavi
– Muhammed Albarmavi

2020-02-21 02:25:32 +00:00
Commented Feb 21, 2020 at 2:25 — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Feb 21, 2020 at 2:25

Muhammed Albarmavi · Accepted Answer · 2020-02-21 02:33:22Z

1

After you create the service you have to inject that service to your component like this

  constructor(private homeServ:HomeService) {  }

then the service will be avilable in the componnet you can get the data

  ngOnInit(){
    this.students = this.homeServ.getStudents();
  }

demo 🚀

you can remove the injectable decorator from the service if the service has no dependency

read more about angular services 👉 her

edited Feb 21, 2020 at 2:33

answered Feb 21, 2020 at 2:28

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display array item in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related