Angular: Leveraging RxJS for combining Action and Data streams

When it comes to streams, there are 2 types:

1.       Data Stream: Mostly HTTP calls where you get a response to a request. And its complete!

               

2.       Action stream: button clicks, drop down selections, check box selections etc where values are emitted continuously, you keep getting new values into a stream  

       Stackblitz links:

         https://stackblitz.com/edit/angular-ivy-o41hzu

         https://stackblitz.com/edit/angular-ivy-pdkt1s  

         https://stackblitz.com/edit/angular-ivy-hlt1u1 (get posts for user name entered)


Consider you have 2 components:

1.       List Component: One to display the list of emails

2.       Detail Component: Displays the post of the selected email from list component

So, our app.component.html looks like this:

<list-component></list-component>

<detail-component></detail-component>

 

INTERFACE

export interface IComment {

  postId: Number;

  id: Number;

  name: String;

  email: String;

  body: String;

}

 

SERVICE:

Let’s design services in a “declarative” style rather than functional style. So, you will now have an observable instead of a function returning an observable

getComments$ = this._http

    .get<IComment[]>(`https://jsonplaceholder.typicode.com/comments`)

    .pipe(

      map(response => response),

      catchError(err => of('error', err))

    );

 

LIST COMPONENT

<select *ngIf="(comments$ | async) as comments">

       <option *ngFor="let comment of comments"> {{ comment.email }}</option>

 </select>

comments$: Observable<IComment[]>;

  ngOnInit() {

    this.comments$ = this._appService.getComments$;

  }

DETAIL COMPONENT

Now, we need to capture the selected email from list. Let’s make a small update to out list component to capture this

List.component.ts:

<select *ngIf="(comments$ | async) as comments" [(ngModel)]="selectedEmail" (change)="onEmailChanged(selectedEmail)">

        <option *ngFor="let comment of comments" [value]="comment.email">{{ comment.email }}</option>

 </select>

 

onEmailChanged(e) {

    this._appService.updateEmailSelection(e);

  }

 

ADDING SUBJECT IN SERVICE

Now this selection of email from list is an “action stream”. You need this stream to emit new data so that you can capture this in details component.

A subject is a special type of stream that acts both as observer and an observable. You can “next” new data and also “subscribe” to it when new data is added to the stream.

Both Subject and Behavior subject are same except a Behavior Subject has to have a default/initial value.

private selectedEmail = new Subject(); //observer

selectedEmailObs$ = this.selectedEmail.asObservable(); //observable

updateEmailSelection(email) {

    this.selectedEmail.next(email); //list component updates this when new email selected

 }

 

ADDING DETAILS STREAM IN SERVICE

getDeatils$: Observable<IComment[]> = combineLatest([

    this.selectedEmailObs$

  ]).pipe(

    switchMap(([emailID]) => {

      return this._http.get<IComment[]>(

        `https://jsonplaceholder.typicode.com/comments?email=${emailID}`

      );

    })

  );

 

All you need to do is capture this stream and display the data using async pipe like before:

<div *ngIf="(details$ | async) as details">

      <div *ngFor="let d of details">

        Name: {{ d.name }} ,{{d.body }}

    </div>

 </div>

 

details$: Observable<IComment[]>;

  ngOnInit() {

    this.details$ = this._appService.getDeatils$;

  }


OUTPUT:



Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more