Angular Two Way Binding

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!

Angular 2 binding

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Angular NgModel Example | ngmodel Directive In Angular 9/10

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

Install Angular - Angular Environment Setup Process

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

Angular Architecture Components and Features

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

Angular Components and Their Types

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.

Agnostic components in Angular

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!