Home » Property Binding in Angular 8 | Angular 8 Property Binding

Property Binding in Angular 8 | Angular 8 Property Binding

by Online Tutorials Library

Property Binding in Angular 8

Property Binding is also a one-way data binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually Angular internally converts string interpolation into property binding.

For example:

<img [src]=”imgUrl” />

Property binding is preferred over string interpolation because it has shorter and cleaner code String interpolation should be used when you want to simply display some dynamic data from a component on the view between headings like h1, h2, p etc.

Note: String Interpolation and Property binding both are one-way binding. Means, if field value in the component changes, Angular will automatically update the DOM. But any changes in the DOM will not be reflected back in the component.

Property Binding Example

Open app.componnt.ts file and add the following code:

Property Binding in Angular 8

Now, open app.component.html and use the following code for property binding:

Property Binding in Angular 8

Run the ng serve command and open local host to see the result.

Output:

Property Binding in Angular 8


You may also like