Template Driven forms

1) app.module.ts

import { StudentRegComponent } from './student-reg.component';
import { StudentService } from './student.service';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
@NgModule({
    imports: [BrowserModule,FormsModule],
    declarations: [AppComponent,StudentRegComponent],
    bootstrap:[AppComponent]
})
export class AppModule { }

2) app.component.ts

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

3) app.component.html

<h1>Student Reg</h1>
<student-reg></student-reg>

4) student-reg.component.html

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

5)student-reg.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'student-reg',
    templateUrl: 'student-reg.component.html'
})

export class StudentRegComponent implements OnInit {
    student:Student;
    constructor() { }
    ngOnInit() {
        this.student = new Student();
     }
    register(){
        console.log(this.student);
    }
}

6)student.ts

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