Angular – Step 6- Two way data binding

Step 0 – Set and retrieve the data to and from the component/template!

Step 1- In home.component.html add the following code:

<div class="play-container">
        <input type="text" [(ngModel)]="name"><br>
        <strong>You said: </strong> {{ name }}

Step 2- Import it into our /src/app/app.module.ts:

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

  imports: [
    FormsModule       // add this
  providers: [],
  bootstrap: [AppComponent]

Step 3- Define the name property in the home.component.ts file:

clickCounter: number = 0; 
name: string = '';  // add this

Done !


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.