ngModel for form binding in Angular - Mini Project: Build & Apply

Using ngModel for Form Binding in Angular

📖 Scenario: You are building a simple user profile form in Angular. The form will have an input field where the user can type their name. You want to bind this input field to a variable in your component so that the variable updates automatically as the user types.

🎯 Goal: Create an Angular standalone component with an input field bound to a userName variable using ngModel. The input should update the variable in real time.

📋 What You'll Learn

Create a standalone Angular component named UserProfileComponent.

Add a string variable called userName initialized to an empty string.

Add an input field in the template bound to userName using ngModel.

Import the necessary Angular forms module to enable ngModel.

Use the standalone: true component option.

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Using ngModel makes it easy to keep form inputs and your data in sync without extra code.

💼 Career

Understanding ngModel and form binding is essential for Angular developers building interactive user interfaces and forms.

1

Create the Angular component and userName variable

Create a standalone Angular component named UserProfileComponent. Inside the component class, create a string variable called userName and set it to an empty string ''.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: ``,
})
export class UserProfileComponent {
  // Your code here
}

Need a hint?

Use export class UserProfileComponent and inside it declare userName = '';.

2

Import FormsModule for ngModel support

Add an import statement to import FormsModule from @angular/forms. Then add imports: [FormsModule] inside the @Component decorator to enable ngModel.

Angular

import { Component } from '@angular/core';
// Your code here

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: ``,
  // Your code here
})
export class UserProfileComponent {
  userName = '';
}

Need a hint?

Import FormsModule and add it to the imports array in the component decorator.

3

Add input field bound to userName with ngModel

Inside the component's template string, add an <input> element. Bind it to the userName variable using [(ngModel)]="userName". This will keep the input and variable in sync.

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [FormsModule],
  template: `
    
  `,
})
export class UserProfileComponent {
  userName = '';
}

Need a hint?

Use <input [(ngModel)]="userName"> inside the template string.

4

Add a paragraph to display the live userName value

Below the input field in the template, add a <p> element that shows the text Your name is: followed by the current value of userName using Angular interpolation {{ userName }}.

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [FormsModule],
  template: `
    
    
  `,
})
export class UserProfileComponent {
  userName = '';
}

Need a hint?

Use <p>Your name is: {{ userName }}</p> below the input in the template.