Signal creation and reading in Angular - Mini Project: Build & Apply

Signal creation and reading

📖 Scenario: You are building a simple Angular app that tracks a user's favorite fruit. You want to use Angular signals to store and read the favorite fruit value reactively.

🎯 Goal: Create an Angular standalone component that uses a signal to hold a favorite fruit string. Display the fruit in the template by reading the signal.

📋 What You'll Learn

Create a signal to hold the favorite fruit string

Initialize the signal with the value 'Apple'

Read the signal value in the template using the signal's function call syntax

Use Angular standalone component syntax

💡 Why This Matters

🌍 Real World

Signals in Angular help build reactive user interfaces that update automatically when data changes, like showing user preferences or live data.

💼 Career

Understanding Angular signals is important for modern Angular development jobs, as signals improve performance and simplify state management.

1

Create the favorite fruit signal

In the AppComponent, import signal from @angular/core. Then create a signal called favoriteFruit and initialize it with the string 'Apple'.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``,
})
export class AppComponent {
  // Create the favoriteFruit signal here
}

Need a hint?

Use signal('Apple') to create the signal holding the string 'Apple'.

2

Add a template to display the favorite fruit

In the @Component decorator, add a template that shows the text Favorite fruit: followed by the value of the favoriteFruit signal. Use the signal's function call syntax favoriteFruit() to read its value.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
  `,
})
export class AppComponent {
  favoriteFruit = signal('Apple');
}

Need a hint?

Use interpolation with {{ favoriteFruit() }} inside the template string.

3

Add a method to update the favorite fruit

Inside AppComponent, add a method called changeFruit that takes a string parameter newFruit and updates the favoriteFruit signal with this new value using the set method.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Favorite fruit: {{ favoriteFruit() }}
  `,
})
export class AppComponent {
  favoriteFruit = signal('Apple');

  // Add changeFruit method here
}

Need a hint?

Use this.favoriteFruit.set(newFruit) inside the method to update the signal.

4

Add buttons to change the favorite fruit

Update the template to add two buttons labeled Banana and Cherry. When clicked, each button should call the changeFruit method with the respective fruit name string. Use Angular's (click) event binding.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Favorite fruit: {{ favoriteFruit() }}
    
  `,
})
export class AppComponent {
  favoriteFruit = signal('Apple');

  changeFruit(newFruit: string) {
    this.favoriteFruit.set(newFruit);
  }
}

Need a hint?

Use (click)="changeFruit('Banana')" and similarly for Cherry on the buttons.