angular property binding code example

Example 1: angular property binding

// component.ts

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

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

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

Example 4: angular property binding

import { Component } from "@angular/core";
@Component({
   selector: 'app-example',
  template: `
              <div>
              <input [value]='myText'></span>       
              </div>
              `
})
export class AppComponent {
  myText: string = "Hello World";
}