Last Updated : 23 Jul, 2025
In this article, we are going to see what is NgModel in Angular 10 and how to use it. NgModel is used to create a top-level form group Instance, and it binds the form to the given form value.
Syntax:
<Input [(NgModel)= 'name']>
NgModule: Module used by NgModel is:
Selectors:
Approach:
Example 1:
app.component.ts
import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformWorkerApp } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
gfg: string = '';
setValue() {
this.gfg = 'GeeksforGeeks';
}
}
app.component.html
<h1>GeeksforGeeks</h1>
<input [(ngModel)]="gfg" #ctrl="ngModel" required>
<p>Value: {{ gfg }}</p>
<button (click)="setValue()">Set value</button>
Output:
Reference: https://v17.angular.io/api/forms/NgModel
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4