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">
    <p>
        <input type="text" [(ngModel)]="name"><br>
        <strong>You said: </strong> {{ name }}
    </p>
</div>

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

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

@NgModule({
  ...
  imports: [
    BrowserModule,
    AppRoutingModule,
    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:

WordPress.com Logo

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

Google photo

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

Twitter picture

You are commenting using your Twitter 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.