Tech Seeker

Unsubscribe An Observable: In Angular applications, it's always recommended to unsubscribe the observables to gain benefits like: Avoids Memory Leaks Aborting HTTP requests to avoid unwanted calls. So in this demo, we will understand the case studies to unsubscribe an observable. Memory Leaks: Now let's implement observables code with memory leaks. So first let's create a service like 'test.service.ts' inside of initialize the 'BehaviourSubject' as below. services/test.service.ts: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class TestService { randNumberSub: BehaviorSubject<number> = new BehaviorSubject<number>( Math.random() ); } (Line: 8-10) Initialized 'BehaviorSubject' of type 'number'. Now let's create components like 'sample1.component.ts' and 'sample2.component.ts' these will c

In this article, we are going to implement an Angular application state management using @ngrx/data. @ngrx/data: In a general angular application using NgRx Store, Effects, and Entity libraries made us to write a huge number of actions, reducers, effects, selectors, HTTP API calls per entity model. It leads to a lot of repetitive code to create, maintain and test. Using NgRx Data we can reduce our code to very little despite having a large number of entity models in our application. The NgRx Data is an abstraction over the Store, Effects, and Entity that radically reduces the amount of code we have to write. By gaining the abstraction benefit, we are going to lose our direct interaction with NgRx libraries. Ngrx Store Flow: Using Ngrx we never contact the store directly, every store operation is carried out by the NgRx store implicitly. Our main point of contact is EntityCollectionService. Using EntityCollectionService for each entity can invoke API calls with default method like '

In this article, we will implement a sample Angular(Version 12) application state management using @ngrx/store(NgRx Version 12). NgRx Store For State Management: NgRx Store provides state management for creating maintainable, explicit applications through the use of a single state and actions in order to express state changes. The main building blocks for the NgRx store are: Actions Reducers Selectors NgRx Store State Management Flow: Angular components trigger the API call and fetch the response data. Angular component raises events through actions. Component passes the API response to the Actions. Reducers are logical functions that listen for action changes. Reducers update the store state based on actions and the payload carried by the actions. Selectors are consumed by angular components. Selectors serve the data from the store to angular components. Create An Angular Application: To start our demo let's create a sample angular application. Install Angular CLI: npm instal