AppDividend
Latest Code Tutorials

Angular NgModel Directive Example Tutorial

139

Get real time updates directly on you device, subscribe now.

Angular NgModel Directive Example Tutorial is the today’s leading topic. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.  Using the two-way binding, we can display a data property as well as an update that property when the user makes changes. We can merely achieve it in the component element as well as HTML element both. The two-way binding uses the syntax as [()] or bind- keyword. The two-way binding uses the syntax of property binding and event binding together. Property binding uses the syntax as bracket [] or bind- and event binding uses the syntax as the parenthesis () or on- and these bindings are considered as one-way binding. Two-way binding works in both directions are setting the value and fetching the value. The two-way binding uses a specific name pattern.

Angular NgModel Directive Example Tutorial

Okay, let us install Angular using Angular CLI.

#1: Install Angular using AngularCLI

Type the following command to install Angular.

npm install -g @angular/cli

Now, generate the Angular project using the following command.

ng new model

 

Angular NgModel Directive Example Tutorial

Now, import the FormsModule inside the app.module.ts file.

// 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 { }

#2: Create the AppData model

Inside src >> app folder, create one file called AppData.ts and add the following code.

// AppData.ts

export class AppData {
  constructor(
      public name: String
  ) {}
}

So, here we have taken one property called name which is the type of String.

Now, import this model file inside the app.component.ts file.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  data = new AppData('');
}

#3: Add HTML code

Okay, so to work two-way data binding correctly with ngModel, we need to write the following code inside the app.component.html file.

<input type="text" class="form-control" id="name" 
  required
  [(ngModel)]="data.name" />

<p>Hello {{ data.name }}!</p>
  • For each input tag, we use ngModel directive to bind data with syntax: [(ngModel)]="data.name" ( AppData is the data model in app.component.ts) class
  • Added a name attribute to the input tag. It is a requirement when using [(ngModel)] in combination with a form.

Save the file and go to the http://localhost:4200

You can see that using NgModel directive, and we can able to do the two-way data binding.

#Understanding NgModel

If we take a look at the source code, we’ll notice that ngModel comes with a property binding. The property binding [ngModel] takes care of updating the underlying input DOM element. Angular allows the shorthand syntax using [()], also called “Banana in a box”. So after all, it’s an implementation detail of ngModel that enables two-way data binding.

Finally, Angular NgModel Directive Example Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.