VOOZH about

URL: https://www.geeksforgeeks.org/angular-js/angular-forms-ngmodel-directive/

⇱ Angular forms NgModel Directive - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Angular forms NgModel Directive

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:

  • FormsModule

Selectors:

  • [ngModel]

Approach: 

  • Create the Angular app to be used
  • In app.component.ts make a variable that gives value to the input field.
  • In app.component.html make a form and use ngModel to get the value of the input.
  • Serve the angular app using ng serve to see the output.

Example 1:

Output:

👁 Image

Reference: https://v17.angular.io/api/forms/NgModel

Comment

Explore