Two Way Data Binding example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Two-Way-Data-Binding-example-in-angular --style=scss --routing --skip-install

cd Two-Way-Data-Binding-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  Name:string;

  ngOnInit()

  {

    this.Name="jc";

  }

}

import FormsModule in app.module.ts file as below image

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule }   from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Open app.component.html file and update code as below

<h1>Two-Way Data Binding example in angular</h1>

Name:<input type = "text" [(ngModel)]="Name"/>

<br>

<h4>Welcome: {{Name}}</h4>

Output: