[YouTube] [Leela Web Dev] Declarative Reactive Programming using RxJS in Angular [ENG, 2021][6 hours, 23 minutes, 54 seconds]

original src


01. Introduction to Declarative Reactive Programming vs Imperative Programming in Angular RxJS.

02. Setup Angular Project and Firebase database step by step. Install RxJS Latest Version

> ng new app
? Would you like to add Angular routing? (y/N) y

? Which stylesheet format would you like to use? SCSS


Realtime Database

Angular RxJS

Angular RxJS

Angular RxJS

Angular RxJS

  "rules": {
    ".read": "true",
    ".write": "true"

$ npm install rxjs@latest
$ npm install bootstrap@latest


03. Get Posts from firebase api using HttpClient. Call in component ngOnInit with Subscribe

$ ng g c components/Header
$ ng g c pages/Posts


Angular RxJS


04. Format Posts Response using RxJS Map Operator and display in the template using ngFor

Angular RxJS


05. Get Categories using Higher Order Mapping Operators using mergeMap

Angular RxJS


06. Understand Change Detection Strategy onPush and Default


07. Advantage of unsubscribing the http observable in ngOnDestroy

$ ng g c pages/Home

08. Get Posts using Declarative Programming in Angular with async & without subscribe for observable

$ ng g c pages/DeclarativePosts

09. Combine Categories & Posts Observables using CombineLatest & ForkJoin Operators


10. Filter Posts by the user selected category and display in the UI

11. Data Stream vs Action Stream. Difference between the two Observable Streams in Angular RxJS

12. Create Action Stream using BehaviorSubject & filter posts with selected Category


13. Create the Posts UI to share the Action Stream between the components in Angular RxJS

$ ng g c pages/AltPosts
$ ng g c components/SinglePost

14. Create Action Stream using Subject for getting Post Details between components

Angular RxJS


15. Show Error Messages using the catchError Operator and assign to the error Subject

Angular RxJS


16. Caching the Observables http data using Share and shareReplay Operators

Angular RxJS


17. Add Loading Spinner Component with Declarative Reactive Programming & Subject

$ ng g c components/loading


Angular RxJS


18. How to Avoid multiple async for observables in template to increase performance


18. How to Avoid multiple async for observables in template to increase performance


19. Create Add Post button and Add Post UI in the Posts UI

$ ng g c components/AddPost

20. Design Add Post Form using Reactive Forms Module

Angular RxJS

21. Add the Post Details submitted using Merge and scan operator

22. Send Post Request to save Post Details in the database using concatMap operator

23. Completing Add Post Feature and fixing small issues while adding Post

Angular RxJS


24. Create Edit Post Form Component for updating the existing Post Details

$ ng g c components/UpdatePost

25. Populate the Post Details in the update post form using Reactive Forms Module

Angular RxJS

26. Completing Update Post Details with Http Put Request in the backend


27. Implement Delete Post from the Post Details List using HTTP Delete Request in Angular RxJS


28. Create Routing for the Posts Adding and Updating through route Params in Angular RxJS

$ ng g c components/PostForm

Angular RxJS

Angular RxJS

29. Add Reactive Forms Module to Posts Form to populate post Details while Update

30. Completing Add and Update Post details with routing using Post Form Component


31. Create Common Global Success & Error Notification Service across all components

32. Display Success Message on Adding & Updating Posts using Notification Service

Angular RxJS

33. Navigate Page back using router after adding Posts Successfully in the Posts Form

34. Display Error Messages when any error occurs while adding or updating Posts


35. Completing Declarative Reactive Programming. Lets See what we did in this Course