All About Angular Bindings

Class Binding

The last version of property binding is class binding. This is very similar to style binding; instead of muddying up our template with inline styles, you add an active class to an element and handle the styling in an associated stylesheet. In the following example, we are applying the active class based on the state of isActive in the component:

<button kendoButton ... [class.active]="isActive"></button>

/* styles.css */

.k-button.active {
  background-color: rebeccaPurple;
  color: white;
}

The .k-button class is used for specificity and would not be needed in all cases.

Event Binding

Our button is pretty snazzy, however we need to actually be setting/unsetting the isActive variable. We can use event binding to capture a variety of user-initiated events and initiate logic in our component class. Angular supports many kinds of events. If we'd like to catch the click event on our button and bind it to a method, we can do so, using parentheses:

(click)="toggleActive()"

Here, we are binding the toggleActive method to be called on button click. The toggleActive method is just setting the active variable to !active. Then we are using the class binding to give our button an active class. The button will be rebeccaPurple when active and grey when not. We also set these changes to happen on hover when active: .k-button.active:hover.

/* styles.css */

.k-button.active, .k-button.active:hover {
  background-color: rebeccaPurple;
  color: white;
}

// app.component.ts

<button kendoButton
        [icon]="'folder'"
        [look]="'outline'"
        [class.active]="isActive"
        (click)="toggleActive()">
        {{btnValue}}
</button>

Two-way Binding

So far, we've examined the various ways to establish unidirectional or one-way bindings. Another type of binding is a bidirectional or two-way binding. Two-way bindings are used when a developer wishes to propagate changes made to an underlying value or event between a component and its template.

In Angular, we can use ngModel to create that two-way data binding. Let's use the same example we built earlier with Kendo UI. First, we have to import the FormsModule in order to have access to ngModule:

Next, we need to include Kendo UI inputs for this example:

Now, we are ready to establish a two-way binding:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input kendoTextBox [value]="email" (keyup.enter)="onEnter()" />`
})

export class AppComponent {
  email = "bob@gmail.com";
  // ...
  onEnter() {
    alert(this.email);
  }
}

Here, we are using the property binding to bind the value of this kendoTextBox to email. The keyup.enter event is bound to the onEnter() method that displays the email entered by the user. Unfortunately, when we change the <input> element and hit enter, the alert is not updated. What is going on?

In this example, the property binding, which as you recall, is a one-way binding (only FROM the component TO the template). We need to use a two-way binding! This is where the formsModule comes in. We'll use the ngModel for two-way binding, which comes from the formsModule:

<input kendoTextBox [(ngModel)]="email" (keyup.enter)="onEnter()" />

Now, instead of a one-way binding, we are two-way binding with [(ngModel)]. For this we are going to need to use both the square brackets and parentheses [()]. The email value now changes in the displayed alert. 🙂 It works! It works!

Recap the Bindings

To recap, one-way bindings use the [] square brackets for property, style, and class bindings. For event bindings, we need to use parentheses () and for two-way binding, we use both [()] square brackets and parentheses!

I hope you've enjoyed this binding party and never get them mixed up again! Here are some extra links to docs about the components used above. Happy coding!

Resources

• Buttons
• Icon Buttons
• Styling Buttons
• Text Box Input