AngularJS (54 Blogs) Become a Certified Professional

NgModel in Angular: A Complete Guide with Examples

Last updated on Apr 26,2024 27.6K Views

6 / 12 Blog from Introduction to Angular

Two-way data-binding was a huge problem with AngularJS. Even though the concept is simple, i.e an amalgamation of property and event-binding, the implementation was rather complex. This problem was solved with the introduction of the ngModel directive in Angular 2. In this article, we will be taking a look into the ngModel directive, and how it works and makes your life as a developer, so much easier:

What is ngModel?

ngModel is Angular’s answer to the two-way data binding problem. Previously in AngularJS, there was no way to perform a binding which would update automatically. This problem got addressed in angular 2 and has been working like that since then. The solution lies in the ngModel directive, which is a part of the FormsModule. Before we learn about ngModel, let’s take a brief look into what exactly is a directive.

 If you would like to learn more about angular, and gear your career towards a proficient angular developer, then consider enrolling for our Angular Certification Course

What are Directives?

angular directive -ngClass Angular - edurekaDirectives are markers on a DOM element that tell AngularJS to attach a specified behaviour to that DOM element or even transform the DOM element and its children. In short, it extends the HTML. Most of the directives in Angular are starting with ng- where ng stands for Angular. Angular includes various built-in directives. In addition to this, you can create custom directives for your application.

ngModel Usage With Example

The ng-model directive binds the value of HTML controls (input, select, text-area) to application data. It is a part of the FormsModule. This directive is used by itself or as part of a larger form. It accepts a domain model as an optional Input. If you have a one-way binding to ngModel with [] syntax, changing the value of the domain model in the component class sets the value in the view. If you have a two-way binding with [()] syntax (also known as ‘banana-box syntax’), the value in the UI always syncs back to the domain model in your class. To learn more about Angular ngModle, check out this Web developer course online.

The following examples show a simple standalone control using ngModel:

import {Component} from '@angular/core';
selector: 'example-app',
template: `
<input [(ngModel)]="name" #ctrl="ngModel" required>
Value: {{ name }}
Valid: {{ ctrl.valid }}
<button (click)="setValue()">Set value</button>
export class SimpleNgModelComp {
name: string = '';
setValue() { = 'Nancy'; }

The above code will present you with a form which is working on two way binding. The input space and result space are tied together in a way that updates things automatically.
output - angular ngmodel - edureka
With this, I’d like to end my blog here. If you have any doubts or queries regarding this article please post them in the comment section below. 

Take your mobile app development career to new heights with a comprehensive Flutter Training Course.

Take your design skills to the next level with our UI Design Course.

Learn about Crud Operation in Angular  and NgClass

Got a question for us? Please mention it in the comments section of this “Angular ngModel” and we will get back to you.

Upcoming Batches For Angular Course Online with Certification
Course NameDateDetails
Angular Course Online with Certification

Class Starts on 29th June,2024

29th June

SAT&SUN (Weekend Batch)
View Details
Angular Course Online with Certification

Class Starts on 27th July,2024

27th July

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

NgModel in Angular: A Complete Guide with Examples