This repository contains the source code of my live coding session "RxJS: real world scenarios for Angular".
I have written some real-world examples in which I use an idiomatic approach in RxJS for managing common scenarios in Angular applications.
This Angular project is not organized in
ngModules in order to keep it as simple as possibile and to focus on RxJS
- Clone this repository
git clone https://github.com/fabiobiondi/talk-angular-rxjs-real-usecases.git
- Install dependencies
cd project_name
npm install
- Run project
npm start
- Run JSON Server (Fake REST API server)
npm run server
Following a list of examples you can find in the repository:
| File | Goal | RxJS topic |
|---|---|---|
login.component |
ROUTED COMPONENT: Example of Reactive forms with async validator |
|
user.validators.service.ts |
ASYNC VALIDATOR SERVICE: Check if username exists, handle pending and return error if not (used in login.component.ts) |
timer switchmap |
auth.service.ts |
SERVICE: Simulate JWT (login / logout / role / token) by using RxJS Subject to store and share data |
BehaviorSubject map |
auth.interceptor.ts |
HTTP INTERCEPTOR: Send token to each HTTP requests and handle errors |
withLatestFrom mergeMap first iif delay catchError of throwError |
admin.guard.ts |
ROUTER GUARD: Guard to allow access to admin sonly (used in app-routing.module.ts) |
Return Observables in router guards |
if-logged.directive.ts |
DIRECTIVE: Directive to render DOM when user is logged (used in navbar.component.ts) |
distinctUntilChanged takeUntil Subject |
if-role.directive.ts |
DIRECTIVE: Directive to render DOM by roleId (used in navbar.component.ts) |
distinctUntilChanged takeUntil Subject |
| File | Goal | RxJS topic |
|---|---|---|
users.component |
ROUTED COMPONENT: Multiple HTTP requests |
forkjoin map |
users-details.component |
ROUTED COMPONENT: Handle Observable sequence to get user details by router params |
switchmap map activatedRoute.params |
demo-async-pipe.component.ts |
ROUTED COMPONENT: How to use async pipe to get the role name by using the roleId |
|
role-name.pipe.ts |
ASYNC PIPE: async pipe to get the roleName by using the roleId |
timer switchMap map |
meteo.component.ts |
ROUTED COMPONENT: How to use RxJS operators in Reactive Forms |
filter debounceTime distinctUntilChanged switchMap map catchError |