Angular Two Way Binding

In my last 2 posts I went through the event binding and property binding syntax in Angular 2. Event binding flows from the component’s template to the model and property binding flows in the opposite direction from the model to the template.

Event and property binding are one-way binding. Two-way binding is where the data flows in both directions between the component’s template and model. Given that event binding uses () syntax and property binding uses [] syntax it makes sense 2 way binding uses [()] syntax!

The ngModel directive allows us to do 2 way data binding. In the following example the criteria component property is bound to the search input’s value in both directions …

import { Component } from "angular2/core";
import { NgClass } from "angular2/common";

@Component({
  selector: "namesearch",
  template: `
    <input
      type="search"
      placeholder="enter criteria"
      [(ngModel)]="criteria"
    /><button (click)="doSearch()">Search</button>
  `,
  directives: [NgClass]
})
export class NameSearchComponent {
  public criteria: string;
  constructor() {
    // set criteria to the users last criteria
    // use a setTimeout() in this simple example
    setTimeout(() => {
      this.criteria = "fred";
    }, 1000);
  }
  doSearch() {
    console.log(this.criteria);
  }
}

angular binding ngmodel component

Angular NgModel is an inbuilt directive that creates a FormControl instance from a domain model and binds it to form control element.

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection

In this article, you will get to know about all the various components present in the angular application by default and how you can add or remove components.

When you’re building a reusable components library, API is very important. Learn how to make components that work with everything and look like anything!