When to use Interpolation in Angular?
This is one-way data binding between script (.ts) and HTML
This will only use you want to bind the “string” value.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h2> Welcome {{name}} </h2> `, styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { public name = "John"; constructor() { } ngOnInit() { } }
When to use Property binding ?
To set an element property to a non-string data value, you must use property binding.
it is applied to the DOM using brackets ” [ ] ” in the below example “isDisabled” is bind to the button disabled property. if we use interpolation. the disabled property can’t be changed after the DOM is created.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h2> Welcome {{name}} </h2> <input type="button" value="button" [disabled]="isDisabled"/> `, styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { public name = "John"; public isDisabled = true; constructor() { } ngOnInit() { } }
You can also use “bind-” word to bind property.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h2> Welcome {{name}} </h2> <input type="button" value="button" bind-disabled="isDisabled"/> `, styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { public name = "John"; public isDisabled = true; constructor() { } ngOnInit() { } }