student-info.html

<form #studentInfoForm="ngForm" (ngSubmit)="register(studentInfoForm)">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" [ngModel]="name">

  <label for="roll">Roll</label>
  <input type="text" name="roll" id="roll" [ngModel]="roll">

  <button type="submit">Save</button>
</form>

student-info.component.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
// ...

@Component({
})
export class StudentInfoComponent {
  name: string = "Vikas Kumar";
  roll: string = "s-101";
}

Two-Way Binding

Angular has given “Banana-Box” syntax ([(ngModel)]="propertyName") to use two way data binding.

<form #studentInfoForm="ngForm" (ngSubmit)="register(studentInfoForm)">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" [(ngModel)]="name">

  <label for="roll">Roll</label>
  <input type="text" name="roll" id="roll" [(ngModel)]="roll">

  <button type="submit">Save</button>
</form>
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
 
})
export class SignUpFormComponent {
   name: string = "Vikas Kumar";
   roll: string = "s-101";
}