1)app.component.html
<table>
<tr><td>Id</td><td>Name</td></tr>
<tr *ngFor="let student of students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
</tr>
</table>
2)app.component.ts
import { Component, OnInit } from '@angular/core';
import { Student } from "./student";
import { StudentService } from "./student.service";
@Component({
selector: 'project',
templateUrl: 'app.component.html'
})
export class AppComponent {
students:Student[] ;
constructor(private studentService:StudentService){
this.students = this.studentService.getStudents();
}
}
3)app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from './app.component';
import { StudentService } from "./student.service";
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers:[StudentService],
bootstrap: [AppComponent],
})
export class AppModule { }
4)student.service.ts
import { Injectable } from '@angular/core';
import { Student } from "./student";
@Injectable()
export class StudentService {
constructor() { }
getStudents(){
return [new Student(1,"s1"),new Student(2,"s2")];
}
}
5)student.ts
export class Student{
id:number;
name:string;
constructor(a,b){
this.id=a;
this.name=b;
}
}