Two-way binding with ngModel in Angular - Mini Project: Build & Apply

Two-way binding with ngModel

📖 Scenario: You are building a simple Angular form where users can type their name and see it updated live on the page.

🎯 Goal: Create an Angular standalone component that uses two-way binding with ngModel to update and display a user's name as they type.

📋 What You'll Learn

Create a standalone Angular component named UserNameComponent

Add a string property called userName initialized to an empty string

Use two-way binding with [(ngModel)] on an input field bound to userName

Display the current value of userName below the input field

Import FormsModule to enable ngModel usage

💡 Why This Matters

🌍 Real World

Two-way binding is common in forms where user input needs to update the app state instantly, like login forms, search boxes, or live previews.

💼 Career

Understanding ngModel and two-way binding is essential for Angular developers building interactive user interfaces that respond immediately to user input.

1

Set up the component and userName property

Create a standalone Angular component named UserNameComponent with a string property called userName initialized to an empty string.

Angular

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

@Component({
  selector: 'app-user-name',
  standalone: true,
  template: ``,
  imports: []
})
export class UserNameComponent {
  // Your code here
}

Need a hint?

Remember to add userName as a string property initialized to an empty string inside the component class.

2

Import FormsModule for ngModel

Add FormsModule to the imports array in the @Component decorator to enable ngModel usage.

Angular

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

@Component({
  selector: 'app-user-name',
  standalone: true,
  template: ``,
  imports: [FormsModule]
})
export class UserNameComponent {
  userName: string = '';
  // Your code here
}

Need a hint?

Import FormsModule from @angular/forms and add it to the imports array in the component decorator.

3

Add input with two-way binding

In the component's template, add an input element with two-way binding using [(ngModel)]="userName".

Angular

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

@Component({
  selector: 'app-user-name',
  standalone: true,
  template: `
    
  `,
  imports: [FormsModule]
})
export class UserNameComponent {
  userName: string = '';
  // Your code here
}

Need a hint?

Use the syntax [(ngModel)]="userName" inside the input tag to bind the input value to the userName property.

4

Display the userName below the input

In the component's template, below the input, add a paragraph that displays the current value of userName using interpolation.

Angular

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

@Component({
  selector: 'app-user-name',
  standalone: true,
  template: `
    
    {{ userName }}
  `,
  imports: [FormsModule]
})
export class UserNameComponent {
  userName: string = '';
  // Your code here
}

Need a hint?

Use Angular interpolation syntax {{ userName }} inside a paragraph tag to show the current name.