bind a variable from component to html angular code example

Example 1: 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 2: 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";
}