Input signals and model signals in Angular - Mini Project: Build & Apply

Input signals and model signals in Angular

📖 Scenario: You are building a simple Angular component that tracks a user's name input and displays it live.

🎯 Goal: Create an Angular standalone component that uses input signals to capture user input and a model signal to store and display the name.

📋 What You'll Learn

Create a standalone Angular component named NameTrackerComponent.

Use Angular signals to hold the user's name.

Use an input signal to capture the text input value.

Use a model signal to store the name.

Display the stored name below the input field.

💡 Why This Matters

🌍 Real World

This pattern is useful for forms where you want to separate the live input from the saved model, such as user profiles or settings.

💼 Career

Understanding Angular signals and how to bind them to inputs and models is essential for modern Angular development and reactive UI design.

1

Create the initial component with a signal for the name

Create a standalone Angular component called NameTrackerComponent with a signal named name initialized to an empty string.

Angular

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

@Component({
  selector: 'app-name-tracker',
  standalone: true,
  template: ``,
})
export class NameTrackerComponent {
  // Your code here
}

Need a hint?

Use signal('') to create a signal holding an empty string.

2

Add an input signal to capture user input

Add an inputName signal initialized to an empty string to capture the user's input separately from the stored name.

Angular

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

@Component({
  selector: 'app-name-tracker',
  standalone: true,
  template: ``,
})
export class NameTrackerComponent {
  name = signal('');
  // Your code here
}

Need a hint?

Create another signal named inputName with signal('').

3

Bind the input field to the input signal and update the model signal

In the component template, add an <input> element with [value] bound to inputName() and (input) event that updates inputName. Add a button that sets name to the current inputName() value when clicked.

Angular

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

@Component({
  selector: 'app-name-tracker',
  standalone: true,
  template: `
    
  `,
})
export class NameTrackerComponent {
  name = signal('');
  inputName = signal('');
  // Your code here
}

Need a hint?

Use [value]="inputName()" and (input)="inputName.set($any($event.target).value)" on the input. Use a button with (click)="name.set(inputName())".

4

Display the stored name below the input

Add a paragraph below the button that displays the stored name using interpolation with {{ name() }}.

Angular

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

@Component({
  selector: 'app-name-tracker',
  standalone: true,
  template: `
    
    Save Name
    
  `,
})
export class NameTrackerComponent {
  name = signal('');
  inputName = signal('');
  // Your code here
}

Need a hint?

Use interpolation {{ name() }} inside a paragraph tag below the button.