1)app.component.html

<h1>Student Manager</h1>
<student-list></student-list>
<student-form></student-form>
<student-update></student-update>
<student-delete></student-delete>

2)app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent {
}

3)app.module.ts

import { StudentDeleteComponent } from './student-delete.component';
import { StudentUpdateComponent } from './student-update.component';
import { FormsModule } from '@angular/forms';
import { StudentFormComponent } from './student-form.component';
import { BrowserModule } from '@angular/platform-browser';
import { StudentService } from './student.service';
import { StudentListComponent } from './student-list.component';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpModule } from "@angular/http";

@NgModule({
    imports: [BrowserModule,HttpModule,FormsModule],
    declarations: [AppComponent,StudentListComponent,StudentFormComponent,StudentUpdateComponent,
                    StudentDeleteComponent],
    providers: [StudentService],
    bootstrap:[AppComponent]
})
export class AppModule { }

4)student-delete.component.html

   <form>    
        Id <input type="text" name="id" [(ngModel)]="student.id" (change)="load();"/><br/>
        Name:{{student.name}}<br/>    
        <button (click)="delete();">delete</button>
    </form>

5)student-delete.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'student-delete',
    templateUrl: 'student-delete.component.html'
})
export class StudentDeleteComponent implements OnInit {
    student:Student;
    constructor(private ss:StudentService) { }
    ngOnInit() {
        this.student = new Student();
     }

    load(){
        this.ss.getStudentById(this.student.id).subscribe(
            (data) => this.student = data
        )
    }
    delete(){
        this.ss.deleteStudent(this.student.id).subscribe(
            (data) => console.log(data)
        )
    }
}

6)student-form.component.html

<form>
    Id <input type="text" name="id" [(ngModel)]="student.id"/><br/>
    Name <input type="text" name="name" [(ngModel)]="student.name"/><br/>
    <button (click)="insert();">Insert</button>
</form>

)student-form.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'student-form',
    templateUrl: 'student-form.component.html'
})
export class StudentFormComponent implements OnInit {
    student:Student;
    constructor(private ss:StudentService) { }
    ngOnInit() {
        this.student = new Student();
     }
     insert(){
        this.ss.insertStudent(this.student).subscribe(
            (data) => console.log(data)
        )
     }
}

7)student-list.component.html

<table>
    <tr *ngFor="let student of students">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
    </tr>

</table>

8)student-list.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'student-list',
    templateUrl: 'student-list.component.html'
})
export class StudentListComponent implements OnInit {
    students:Student[];
    constructor(private ss:StudentService) { }
    ngOnInit() { 
        this.ss.getStudents().subscribe(
            (data) => this.students = data
        )
    }
}

9)student-update.component.html

<form>
        Id <input type="text" name="id" [(ngModel)]="student.id"/><br/>
        Name <input type="text" name="name" [(ngModel)]="student.name"/><br/>
        <button (click)="update();">Update</button>
    </form>

10)student-update.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'student-update',
    templateUrl: 'student-update.component.html'
})
export class StudentUpdateComponent implements OnInit {
    student:Student;
    constructor(private ss:StudentService) { }
    ngOnInit() {
        this.student = new Student();
     }
     update(){
        this.ss.updateStudent(this.student).subscribe(
            (data) => console.log(data)
        )
     }
}

11)student.service.ts

import { Student } from './student';
import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import { Observable } from "rxjs";
import 'rxjs/add/operator/map';
@Injectable()
export class StudentService {
    constructor(private http:Http) { }
    getStudents(){
        return this.http.get("http://localhost:3000/students").map(
            (response)=>response.json()
        )
    }
    getStudentById(id:number){
        return this.http.get("http://localhost:3000/students/"+id).map(
            (response)=>response.json()
        )
    }
    insertStudent(student:Student){
        return this.http.post("http://localhost:3000/students",student).map(
            (response)=>response.json()
        )
    }
    updateStudent(student:Student){
        return this.http.put("http://localhost:3000/students/"+student.id,student).map(
            (response)=>response.json()
        )
    }
    deleteStudent(id:number){
        return this.http.delete("http://localhost:3000/students/"+id).map(
            (response)=>response.json()
        )
    }
}

12)student.ts

export class Student{
    id:number;
    name:string;

}