property binding in angular 8 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: angular img src binding

<img [src]="imagePath" />

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: use property in angular 8

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  // this is property and you can use in your ts file 
  title = "Data binding using Property Binding";      
  imgUrl="https://static.javatpoint.com/tutorial/angular7/images/angular-7-logo.png";    
} 

// and this is your html code looks like

<h2>{{ title }}</h2> <!-- String Interpolation -->    
<img [src]="imgUrl" /> <!-- Property Binding -->