Introduction
In this article, we will see ngModel concept in Angular and an example with simple code in two steps.
ngModel
The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data. With the ng-model directive you can bind the value of an input field to a variable created in Angular. The binding goes both ways. If the user changes the value inside the input field, the Angular property will also change its value.
The ngmodel directive is not part of the Angular Core library. It is part of the FormsModule library. You need to import the FormsModule package into your Angular module.
![]()
If you want to create a form in angular app then you need to import FormsModule from @angular/forms library. so let's add following code to app.module.ts file.
In app.module.ts:
import { FormsModule } from '@angular/forms';
We will write code of HTML form with ngModel. so add following code to app.component.html file.
In app.component.html:
<input [(ngModel)]="CopyText">
<strong>{{CopyText}}</strong>
<input type="text " value="{{CopyText}}">
The square indicates the Property binding [ ] & parentheses indicates the event binding ( ). The above syntax sets up both property & event binding.
The two way data binding is nothing but both property binding & event binding applied together. Property Binding is one way from view to component. The event binding is one way from component to view. The value that is declared for ngmodule is displayed using string interpolation{{ }}.
This two-way binding with [()] syntax is also known as 'banana-in-a-box syntax'.
In event binding we use (input) event to bind the data to it like (input)="name=$event.target.value" also known as event binding.We combine both event and property binding in this ngmodel.
Here I have not assigned any value to the 'CpoyText' property in typescript. So it displays nothing initially. As we start typing in input box the value gets assigned to it. We can also pre-define value that property in typescript so that it will display the event value when loading. The ngModel is a fundamental directive for creating user-friendly forms with the template-driven approach; it creates a FormControl instance from a domain model and connects with a form control element.
This is just to demonstrate ngmodel concept so I have not included any form control or form group to my code. There are many ways in which ngmodel can be declared and assigned value. I have shown the simple way of declaring it inside HTML tag without having any complex code.
Summary
This does not require any typescript methods or functions, ngModel simply binds the data to the mentioned tag in HTML. Angular does have a [(value)] syntax to which sets up the two-way binding. It automatically sets up property binding to the value property of the element. It also sets up the event binding to valueChange Property. This 2 way binding is a simple and a powerful mechanism. It also sets up the event binding to valueChange Property. But since we hardly have any HTML element, it follows those naming conventions unless we create our own component.
Thank you!