When NgRx is overkill in Angular - Mini Project: Build & Apply

When NgRx is Overkill

📖 Scenario: You are building a simple Angular app to manage a small list of favorite movies. The app only needs to add and display movies without complex state sharing or side effects.

🎯 Goal: Build a small Angular component that manages movie titles using local component state and signals instead of NgRx, showing how simple state can be handled without complex libraries.

📋 What You'll Learn

Create a standalone Angular component named FavoriteMoviesComponent

Use Angular signals to hold the list of movies

Add a string signal for the new movie input

Implement a method to add the new movie to the list

Display the list of movies in the template

Avoid using NgRx or any external state management library

💡 Why This Matters

🌍 Real World

Many small Angular apps or components only need simple local state management. Using NgRx can add unnecessary complexity and boilerplate in these cases.

💼 Career

Understanding when to use or avoid complex state management libraries like NgRx helps developers write cleaner, simpler, and more maintainable Angular code.

1

Set up the initial movie list signal

Create a standalone Angular component named FavoriteMoviesComponent. Inside it, create a signal called movies initialized with the array ["Inception", "The Matrix"].

Angular

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

@Component({
  selector: 'app-favorite-movies',
  standalone: true,
  template: ``,
})
export class FavoriteMoviesComponent {
  // Your code here
}

Need a hint?

Use Angular's signal function to create a reactive variable holding the movie list.

2

Add a signal for new movie input

Inside FavoriteMoviesComponent, add a signal called newMovie initialized with an empty string "" to hold the user's input for a new movie title.

Angular

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

@Component({
  selector: 'app-favorite-movies',
  standalone: true,
  template: ``,
})
export class FavoriteMoviesComponent {
  movies = signal(["Inception", "The Matrix"]);
  // Your code here
}

Need a hint?

Create a signal to hold the new movie title as an empty string.

3

Add method to add new movie to the list

Add a method called addMovie() inside FavoriteMoviesComponent. This method should add the current value of newMovie() to the movies signal array only if newMovie() is not empty, then reset newMovie to an empty string.

Angular

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

@Component({
  selector: 'app-favorite-movies',
  standalone: true,
  template: ``,
})
export class FavoriteMoviesComponent {
  movies = signal(["Inception", "The Matrix"]);
  newMovie = signal("");

  // Your code here
}

Need a hint?

Use this.newMovie() to get the current input and this.movies.set([...this.movies(), newMovie]) to update the list.

4

Complete the template to display and add movies

In the component's template, add an input bound to newMovie signal using [(ngModel)] or Angular's reactive binding, a button that calls addMovie() on click, and a list (<ul>) that displays each movie from the movies signal using *ngFor. Ensure accessibility by adding aria-label to the input.

Angular

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

@Component({
  selector: 'app-favorite-movies',
  standalone: true,
  template: `
    
  `,
})
export class FavoriteMoviesComponent {
  movies = signal(["Inception", "The Matrix"]);
  newMovie = signal("");

  addMovie() {
    const movie = this.newMovie();
    if (movie.trim()) {
      this.movies.set([...this.movies(), movie.trim()]);
      this.newMovie.set("");
    }
  }
}

Need a hint?

Use Angular's event binding (input) to update newMovie and *ngFor to list movies.