Another type of binding in Angular is property binding. In property binding, you use square brackets. It allows you to set the property of html elements within the template from data from the component class. Here is an example…
export class AppComponent {
divWidth: 300;
divHeight: 300;
}We can use the aforementioned component properties to set the width and height of a div in the html template. Here is an example…
<div
[style.width.px] = 'divWidth'
[style.height.px] = 'divHeight'>
'Div Content'
</div>Angular’s change detection will keep the properties in sync. This allows you to programatically change the properties of an html element.
Happy Coding!
Clay Hess
