
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 !