Angular bindings are a super-powerful mechanism built into the framework. Unfortunately, they can be difficult to remember. This blog post by Alyssa Nicoll will help.

Angular provides a powerful mechanism for a wide range of bindings. You don’t have to be new to forget which binding is which. Sometimes, when reaching for the right binding, I mess up or forget the syntax. I thought an article might help clarify how and when to apply bindings in your Angular applications, for those memory moments we all sometimes have.

Below is a handy-dandy chart for quick reference (linked to each section):

It includes all of the types of Angular Bindings along with a line of markup showing how that binding can be used. We'll cover all the bindings in more detail in the sections below, except for attribute binding, which I found to be quite uncommon.

Property Binding

In Angular, the simplest binding is property binding. It uses `[ ]` brackets to get the job done. It is a one-way binding from the component to the template.

<input [placeholder]="placeholderValue" />



String Interpolation vs Property Binding

You can also use string interpolation to get the same property binding done:

<input placeholder="{{placeholderValue}}" />

String interpolation is best suited for text between opening and closing elements:

<h2>{{amazingTitle}}</h2>

This same approach can be done through property binding but it's less intuitive. In the example above, we can achieve the same result through the textContent attribute:

<h2 [textContent]="amazingTitle"></h2>

Ultimately, it comes down to personal preference. Buttons in Kendo UI take advantage of different property binding types in order to give you the ability to customize the look of our buttons. For example, you can set [icon] to any number of icons (found here). You can also set the [look] of the button to outline , flat , or default ! You can read more about the awesome customizable Kendo UI button here.



https://stackblitz.com/edit/kendoui-all-the-buttons?ctl=1&embed=1&file=app/app.component.ts&hideExplorer=1&hideNavigation=1>

<button kendoButton [icon]="'folder'" [look]="'outline'">{{btnValue}}</button>

Here, we are using string interpolation to bind the value of the button. At the same time, we're using property bindings for its icon and look . It's important to mention that both binding types are one-way bindings; from the component to the template. You'll have to use discretion for which type of binding you use. Again, it comes down to personal preference.



https://stackblitz.com/edit/kendoui-property-binding?ctl=1&embed=1&file=app/app.component.ts&hideExplorer=1&hideNavigation=1">

Style Binding

Another type of property binding is style binding. We can add styles inline with logic! If we’d like to apply some inline styles to this button we can do so inside the square brackets:

<button kendoButton ... [style.backgroundColor]="'rebeccaPurple'"></button>

In the example above, we've changed the background color to rebeccaPurple , but any CSS-acceptable color value (HEX, RGB, etc) will work. Check W3Schools for a full list of DOM style properties you can bind to.

Let's now look at the same example but with some logic:

<button kendoButton ... [style.backgroundColor]="isActive ? 'rebeccaPurple' : 'white'"></button>

Here, we are binding the background color to rebeccaPurple only if the isActive variable is true . Otherwise, the background color is set to white .

So style binding is just property binding to style [style.PROPERTY] followed by the property you'd like to modify.