Advanced Angular Lessons

As a Front-end Lead Developer, I want to share my knowledge about front-end technologies and best practices. Here are a few lessons to boost your Angular expertise !

📚 1. Learn to master NgRx

✅ Prerequisites

Angular CLI v19+
Node.js v22.12+
Basic knowledge of Angular components and services

📖 Step 1: Get Started

Before diving into the exercises, it's crucial to understand what NgRx is, when to use it, and how to implement it.

👉 Read this article to learn first

The goal of the following exercises is to enhance a simple notebook app by replacing the current service-based state management with NgRx. The goal is to persist the notes even after a page refresh.

🎯 Try the final app: Live Demo
💻 Check the final code: ngrx-notes-final

🛠️ Step 2: Setup Project

Follow these steps to get started:

Clone the repository:

git clone https://github.com/BenjaminCanape/AdvancedAngularLessons.git

Checkout the start branch: ngrx-notes-start
Install dependencies:
```
npm i --legacy-peer-deps
```
Run the application:
```
ng serve --no-hmr
```
(HMR is disabled to avoid page flickering issues.)

🏋️ Exercises

📌 Exercise 1: Configure NgRx

Steps:

Install NgRx packages:

npm install @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/schematics

Set up the store:
- Create a store folder inside src/app
- Inside the store folder, create:
  - app.state.ts
  - A note folder containing note.reducer.ts

Define the note state inside note.reducer.ts:

import { createReducer } from '@ngrx/store';

export interface NoteState {}

const initialState: NoteState = {};

export const noteReducer = createReducer(initialState);

Configure the global state in app.state.ts:

import { NoteState } from './note/note.reducer';

export interface AppState {
  notes: NoteState;
}

Provide the store in app.config.ts:

const reducers: ActionReducerMap<AppState> = { notes: noteReducer };

export const appConfig: ApplicationConfig = {
   providers: [
     provideStore(reducers);
   ]
}

🎉 Congratulations, your store is now configured!

❌ Common pitfalls

Forgetting to import provideStore in app.config.ts.
Incorrect reducer configuration leading to state issues.

❓ FAQ

Q: Why do I need to create an app.state.ts? A: It provides a centralized place to manage the global application state.

📌 Exercise 2: Model and Initial State

🔗 Branch: ngrx-notes-exercise-2

Move note.model.ts to src/app/store/note
Modify note.reducer.ts to include notes and selectedId properties in the state.
Define an appropriate initial state.

❌ Common pitfalls

Storing unnecessary data in the state.
Not initializing properties correctly.

❓ FAQ

Q: What should be included in the state? A: Store only necessary properties in the state.

📌 Exercise 3: Actions and Reducers

🔗 Branch: ngrx-notes-exercise-3

Create actions for adding, updating, deleting and selecting notes.
Modify the reducer to handle the new actions (some actions will be used later in effects, not here).

Example:

note.actions.ts

import { createActionGroup, props } from '@ngrx/store';

export const noteActions = createActionGroup({
  source: 'Note',
  events: {
    Add: props<{ note: NoteData }>(),
    'Add Success': props<{ note: Note }>(),
    'Add Failure': props<{ error: string }>(),
  },
});

note.reducer.ts

export const noteReducer = createReducer(
   initialState,
   on(noteActions.addSuccess, (state, { note }) => ({
   ...state,
   notes: [note, ...state.notes],
   })),
);

❌ Common pitfalls

Incorrect use of immutable state updates.

❓ FAQ

Q: Why do I need separate success and failure actions? A: It helps in handling API responses more efficiently.

📌 Exercise 4: Side Effects (Effects)

🔗 Branch: ngrx-notes-exercise-4

Implement side effects using createEffect for handling asynchronous operations for adding, updating and deleting notes.
Call the API service inside the effect and dispatch success/failure actions.
Display user information (a snackbar for instance) when success or failure actions are dispatched
Select a note when the note has been added successfully.

Example:

note.effect.ts

@Injectable()
export class NoteEffects {
  private actions$ = inject(Actions);
  private noteService = inject(NoteService);

  addNote$ = createEffect(() =>
    this.actions$.pipe(
      ofType(noteActions.add),
      switchMap(({ note }) =>
        this.noteService.add(note).pipe(
          map(note => noteActions.addSuccess({ note })),
          catchError(error => of(noteActions.addFailure({ error })))
        )
      )
    )
  );
  
  addNoteSuccess$ = createEffect(() =>
      this.actions$.pipe(
      ofType(noteActions.addSuccess),
      switchMap(() => this.showSnackBar('notes.add_success'))
   ), { dispatch: false }
);
}

For information, you also need to modify the NoteService methods. We will clean this service soon, but in the first place, we will just edit the add, update and delete methods. At the end of the add method, you can return of(noteObject), in the update one, you can return of(note) and in the delete method, you can return of(true). It simulates the return of an api call as an Observable.

Be careful, your effects are not taken into account until your provide them in the application. So add this provideEffects([NoteEffects]), in the ApplicationConfig object.

❌ Common pitfalls

Not providing effects in ApplicationConfig.

📌 Exercise 5: Selectors

🔗 Branch: ngrx-notes-exercise-5

Create selectors to retrieve specific data from the state: all notes, the selected id and the selected note.

Example:

note.selector.ts

export const selectNoteState = createFeatureSelector<NoteState>('notes');
export const selectAllNotes = createSelector(selectNoteState, state => state.notes);

❓ FAQ

Q: Can I select state from multiple features? A: Yes, by combining selectors from different feature states.

📌 Exercise 6: Facade Pattern

🔗 Branch: ngrx-notes-exercise-6

Implement a facade to encapsulate store logic and simplify component interaction.
You want to expose the selectors and the methods to create, select, update and delete a note.
Edit your components using the NoteService to now use the NoteFacade instead
Clean the Note service from unnecessary signals and methods
Test the application after that, it's using the store and it works.

Example:

note.facade.ts

@Injectable({
   providedIn: 'root',
})
export class NoteFacade {
   private store = inject(Store<NoteState>);
   
   notes$ = this.store.select(selectAllNotes);
   
   add(note: NoteData) {
      return this.store.dispatch(noteActions.add({ note }));
   }
}

📌 Exercise 7: Debugging with Redux DevTools

🔗 Branch: ngrx-notes-exercise-7

Install and configure Redux DevTools for better state visualization and debugging with this documentation
Then play with Redux devtools to see which actions are dispatched when you click on buttons or write notes.

📌 Exercise 8: Persisting State with Local Storage

🔗 Branch: ngrx-notes-exercise-8

Use ngrx-store-localstorage to persist state across browser refreshes. Install it and configure it with this documentation
When it's done, launch the application, add some notes, refresh the page and you will see that the store will be rehydrated with your previous data.

🎉 Congratulations!

You have successfully completed the NgRx training! You are now equipped to build state-of-the-art Angular applications with NgRx.

🔗 Need help? Check the final implementation: ngrx-notes-final

BenjaminCanape/AdvancedAngularLessons

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Error
Looks like something went wrong!