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;
    }
}

results matching ""

    No results matching ""