How do I use the Angular ngModel directive ?

The ngModel directive creates a two-way data binding between an HTML form element and the component.

In the most recent version of Angular, data binding is one-way by default. Notably, this is one of the key improvements over Angular 1.x in that it eliminates unnecessary performance issues that can crop up quickly. But the beauty of the ngModel directive is that it provides a way to explicitly give your template and your component’s data a two-way binding. So, when it is changed on one end, it is updated on the other. In other words, your data becomes “live”.

Now the most common case for two-way data binding is HTML forms. Here, as the user makes changes to a form, you want to capture those changes in your data. And conversely, you’ll also want any changes in your data to be reflected in the form. And here’s where Angular’s ngModel directive comes in; it’s the key to this live relationship. You simply assign a data point from your component to this directive in your template and your binding becomes two way. Take a look at the examples below, for further examination.

Example # 1

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html'
})
export class HomeComponent {
  content: string = "";
  title: string = ""; 
}

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

@Component({

selector: 'home',

templateUrl: 'src/home/home.html'

})

export class HomeComponent {

content: string = "";

title: string = "";

}

In Example # 1, we have our component. There are two properties: content and title. These properties will be connected to our form input elements via the ngModel directive. This two-way data-binding means that when the property is changed in one place, it is updated any place else that it is referenced, and vice verse.

Example # 2

<div>
    <h2>Create Content</h2>
    <input
    type="text"
    [(ngModel)]="title"
    placeholder="Enter a title" />
    <textarea
    type="text"
    [(ngModel)]="content"
    placeholder="Enter some text here...."></textarea>
</div>
<hr />
<div>
    <h2>{{title}}</h2>
    {{content}}
</div>

<div>

<h2>Create Content</h2>

<input

type="text"

[(ngModel)]="title"

placeholder="Enter a title" />

<textarea

type="text"

[(ngModel)]="content"

placeholder="Enter some text here...."></textarea>

</div>

<hr />

<div>

<h2>{{title}}</h2>

</div>

In Example # 2, we have our Angular template. There is a text-input element and a textarea element. The text-input element has an ngModel directive and its value is: title. This means that two-way data binding is set up for the title property. The textarea element has an ngModel directive and its value is: content. This means that two-way data binding is set up for the content property.

Below the input elements is a div element with two placeholders: {{title}} and {{content}}. The net result of this is that when you enter any text in the text input, that text will update the {{title}} placeholder in the UI. Also, when you enter any text in the textarea, that text will update the {{content}} placeholder in the UI

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: github.com/kevinchisholm/video-code-examples/tree/master/angular/templates-and-data/ngModel

Summary

So, Angular’s default one-way data binding methodology is a key benefit of its 2+ upgrade. And, of course, in most cases, this approach is sufficient. But, as it turns out, in some cases, such as HTML forms, you want a “live” connection between your form and your data source. So this is where ngModel directive comes in. It provides the “live” connection otherwise known as two-way data binding.