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:

Data binding example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new data-binding-example --style=scss --routing --skip-install

cd data-binding-example

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 {

  Id:number;

  Name:string;

  Email:string;

  City:string;

  ngOnInit()

  {

    this.Id=101;

    this.Name="adi";

    this.Email="jc.adi101@gmail.com";

    this.City="Bangalore";

  }

}

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

<h1>Data binding example</h1>

<table>

  <tr>

    <td>

      Id:

    </td>

    <td>

      {{Id}}

    </td>

  </tr>

  <tr>

    <td>

      Name:

    </td>

    <td>

      {{Name}}

    </td>

  </tr>

  <tr>

    <td>

      Email:

    </td>

    <td>

      {{Email}}

    </td>

  </tr>

  <tr>

    <td>

      City:

    </td>

    <td>

      {{City}}

    </td>

  </tr>

</table>

run the project using ng serve --open command in VS code

Output:

Two way data binding in react

In this Example we can see Two way data binding (Parent to Child and Child to parent) 

• Create Components folder under src folder
• Add TwoWayBindingParent.js file and add below Code

import React,{Component} from 'react';

import TwoWayBindingChild from './TwoWayBindingChild';

class  TwoWayBindingParent extends Component {

  state={

    Person:[

      {name:'adi',age:29}

    ]

  }

nameChangedEvent=(event)=>{

    this.setState({Person:[

        {name:event.target.value ,age:30}

      ]})

    }

  render(){

  return (

    <div>

        <p>Two Way Binding </p>

      <TwoWayBindingChild 

      name={this.state.Person[0].name} 

      age={this.state.Person[0].age}

      changed={this.nameChangedEvent}/>

    </div>

  );

  }

}

export default TwoWayBindingParent;

• Add TwoWayBindingChild.js file and add below Code

import React from 'react';

const TwoWayBindingChild =(props)=>{

    return(

        <div>

        <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!</p>

       <input type="text" onChange={props.changed}></input>

        </div>

    );

}

export default TwoWayBindingChild;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import TwoWayBindingParent from './Components/TwoWayBindingParent'

function App() {

  return (

    <div className="App">

     <TwoWayBindingParent/>

    </div>

  );

}

export default App;

Output: