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

Two-way binding in forms

📖 Scenario: You are building a simple user profile form in Angular. The form has an input field where the user can type their name. You want the input field to update the name variable in your component automatically, and also show the updated name below the input in real time.

🎯 Goal: Create an Angular standalone component that uses two-way binding with [(ngModel)] to connect an input field to a name variable. Display the current value of name below the input.

📋 What You'll Learn

Create a standalone Angular component named UserProfileComponent.

Add a name variable initialized to an empty string.

Add an input field bound to name using two-way binding with [(ngModel)].

Display the current name value below the input field.

Import FormsModule to enable ngModel.

💡 Why This Matters

🌍 Real World

Two-way binding is commonly used in forms to keep the user interface and data model in sync automatically, making user input handling easier.

💼 Career

Understanding two-way binding is essential for Angular developers to build interactive forms and user interfaces efficiently.

1

Set up the component and name variable

Create a standalone Angular component named UserProfileComponent with a name variable initialized to an empty string.

Angular

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

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

Need a hint?

Define the name variable inside the component class and set it to an empty string.

2

Import FormsModule for ngModel

Add FormsModule to the imports array in the @Component decorator to enable two-way binding with ngModel.

Angular

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

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

Need a hint?

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

3

Add input field with two-way binding

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

Angular

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

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

Need a hint?

Use [(ngModel)]="name" inside the input tag to bind the input value to the name variable.

4

Display the current name value below the input

Add a paragraph below the input in the template that displays the text Your name is: {{ name }} to show the current value of name.

Angular

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

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

Need a hint?

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