data binding angular code example

Example 1: Bidirectionnal model binding

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

Example 2: property binding angular documentation

// component.ts

    @Component({
      templateUrl: 'component.html',
      selector: 'app-component',
    })
    export class Component {
      name = 'Peter';

      updateName() {
        this.name = 'John';
      }
    }
        // component.html

    <p>My name is {{name}}</p>
    <button (click)="updateName()">Update button</button>

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}}
*/