Keeping Data in Sync with Two-way Binding Using Ngmodel

Nov 12, 2019 • 4 Minute Read

Introduction

Keeping the data in sync between the UI and control is very important in a form. It’s crucial to change the value of the control dynamically and display it on the screen at the same time. In this guide, we’ll look at an example that will explain how to do this in Angular.

How to Sync Data

Syncing data between the control and the UI is essential to create an excellent user experience and easily handle form data. We can do this using NgModel, one of the core features of Angular.

NgModel

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

It uses two kinds of binding:

Property binding
Event binding

Property Binding

Property binding is used to pass the data from the component class (component.ts) and set the value of the element in the front end.

To represent property binding, we use a pair of square brackets [ ] with the field name.

Example : <a [data]="" />

Event Binding

Event binding is used to change the data in the component class after a particular action. To represent event binding, we use a pair of round brackets ( ) with the field name.

Example: <a (eventName)="" />

NgModel works using these two bindings together. First, it passes the data from the component class and set data in FormControl. Second, it passes the data from UI after a specific action is triggered and then changes the value of the control.

Syntax of NgModel

In this section, we’ll use ngModel with HTML tags in Angular applications.

The tag could be any HTML5 tag, such as <input /> or <textarea>. The NgModel doesn't support tags like <span>, <label>.

Let's get our hands dirty and dive into the code.

app.component.html

          <form>
  Username:<input
    type="text"
    placeholder="Enter Username"
    id="username"
    name="username"
    [(NgModel)]="username"
  />
  <label for="username">{{username}}</label>
</form>
    

Here I've used an input tag, but you can choose any tag of your choice. You must have the name attribute in the tag and the crucial NgModel directive. This helps you to sync the data with the component class file. I'm displaying the username in the next line of the input tag, as reflected below.

app.component.ts

          import { Component, DoCheck, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  username: string;

  ngOnInit() {
    this.username = "John";
  }
}
    

In the component class file, I've just set the value of the variable username, which is the same as the formControlName. It must be the same; otherwise, it's not going to work.

app.module.ts

          import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
    

To work with the ngModule you need to import the FormModule. If you're working with a template-driven form, you need to import FormModule in the app.module.ts.

Now we're going to have a look at the output.

As we set the value of the variable username in the app.component.ts, our output should look like this:

Username:
Hello John

Depending on the value of the text box, the label below would change to match it.

Conclusion

In this guide, we've learned about an essential topic of template-driven forms. This will help you with a variety of different projects. You can read more here.

If you want to create a dynamic form, take a look at reactive forms.