ngmodel two way binding code example

Example 1: what is ngmodel property binding

<input [(ngModel)]="username">

<p>Hello {{username}}!</p>

Example 2: Bidirectionnal model binding

content_copy
      
      <app-sizer [(size)]="fontSizePx"></app-sizer>

Example 3: angular two way property binding

/* Two-Way Data Binding
	- communicates data between the component and the view 
      (bi-directionally) 
	- this is acheived by using the ngModel directive 
	- include `import { FormsModule } from @angular/forms`	 
    - syntax: `[(ngModel)]='some value'`     
*/

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

@Component({
  selector: 'app-example', 
  template: `
			 Enter the value: <input [(ngModel)]='val'>
			 <br>
			 Entered  value is: {{val}}
			`
})

export class AppComponent {
  val: string = '';
}

/*
Process:
	1. View communicates inputted value to AppComponent
    2. AppComponent communicates the updated val to the view 
       via {{val}}
*/