How can I implement a user notification service using rxjs within Angular?

Question

How can I implement a user notification service using rxjs within Angular?

As a newcomer to reactive programming, I am exploring ways to create an Angular service that can present notifications to the user. Check out what I have accomplished so far:

https://stackblitz.com/edit/angular-rxjs-notifications?file=app%2Fapp.component.html

The main challenge in my implementation lies in figuring out how to queue notifications in a reactive manner. My goal is for the notification div to display when the first notification is pushed, and disappear only when "Clear" is clicked unless more notifications have been added since. This way, clearing would reveal the next notification, continuing until all notifications are cleared. Subsequently, once a new notification is received, the div should reappear.

In my setup, I opted for a Subject instead of a ReplaySubject because I do not want users to see notifications sent while they were loading the next screen. However, I realized that if there is routing within my app.component.html, this behavior may still occur. Perhaps I need to clear the notification queue upon navigation?

Your insights are greatly appreciated!

angular typescript rxjs

Answer 1

Answer №1

Here is an example showcasing the structure of a service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { merge } from 'rxjs/observable/merge';
import { map, scan } from 'rxjs/operators';

enum ActionType {
  insert = 'insert',
  remove = 'remove'
}

interface Action {
  type: ActionType;
}

interface InsertAction extends Action {
  payload: string;
}

interface RemoveAction extends Action { }

@Injectable()
export class NotificationService {
  messages$: Observable<string[]>;

  private insertSource = new Subject<string>();
  private removeSource = new Subject<void>();

  constructor() {
    const insert$ = this.insertSource.asObservable()
      .pipe(map((payload) => ({ type: ActionType.insert, payload })));

    const remove$ = this.removeSource.asObservable()
      .pipe(map((payload) => ({ type: ActionType.remove })));

    this.messages$ = merge(insert$, remove$)
      .pipe(
      scan((acc: any, { payload, type }) => {
        if (type === ActionType.remove) {
          acc = acc.slice(0, -1);
        }
        if (type === ActionType.insert) {
          acc = [...acc, payload]
        }
        return acc;
      }, [])
      );
  }

  insertMessage(msg: string) {
    this.insertSource.next(msg)
  }

  removeMessage() {
    this.removeSource.next()
  }
}

Check out the live demo here

We utilize two streams, remove$ and insert$, merging them together before reducing to a singular array through the scan operator.

For instance, a sequence like

insert(hello) -> insert(world) -> remove -> insert(kitty)

would be condensed down to [hello, kitty].

Answer 2

Here is an example showcasing the structure of a service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { merge } from 'rxjs/observable/merge';
import { map, scan } from 'rxjs/operators';

enum ActionType {
  insert = 'insert',
  remove = 'remove'
}

interface Action {
  type: ActionType;
}

interface InsertAction extends Action {
  payload: string;
}

interface RemoveAction extends Action { }

@Injectable()
export class NotificationService {
  messages$: Observable<string[]>;

  private insertSource = new Subject<string>();
  private removeSource = new Subject<void>();

  constructor() {
    const insert$ = this.insertSource.asObservable()
      .pipe(map((payload) => ({ type: ActionType.insert, payload })));

    const remove$ = this.removeSource.asObservable()
      .pipe(map((payload) => ({ type: ActionType.remove })));

    this.messages$ = merge(insert$, remove$)
      .pipe(
      scan((acc: any, { payload, type }) => {
        if (type === ActionType.remove) {
          acc = acc.slice(0, -1);
        }
        if (type === ActionType.insert) {
          acc = [...acc, payload]
        }
        return acc;
      }, [])
      );
  }

  insertMessage(msg: string) {
    this.insertSource.next(msg)
  }

  removeMessage() {
    this.removeSource.next()
  }
}

Check out the live demo here

We utilize two streams, remove$ and insert$, merging them together before reducing to a singular array through the scan operator.

For instance, a sequence like

insert(hello) -> insert(world) -> remove -> insert(kitty)

would be condensed down to [hello, kitty].

How can I implement a user notification service using rxjs within Angular?

Answer №1

Similar questions

Informing the angular client of a controller error message

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Angular 8 does not show the default option in the select tag

Modifying styles/css in Angular2 using JavaScript results in a temporary change in styles before ultimately reverting back to the original styles

Angular: Dynamically add or delete an interceptor based on conditions

Angular 2: Issue with Table not Being Updated

JavaScript - Trouble encountered while trying to use splice to insert one array into another array

What is the best way to display the arrows on a sorted table based on the sorting order in Angular?

What is the best way to change the parent route without losing the child routes?

Using a Typescript typeguard to validate function parameters of type any[]

Angular version 9.1 includes a myriad of functioning routes, with the exception of just one

Troubleshooting a Missing Angular (8) Pipe Error in Your Ionic 4 Application

Reestablishing communication with a SignalR socket in .NET CORE using Angular

Encountering an issue when using npm to add a forked repository as a required package

Having trouble retrieving the "Text" from the "element" with the help of "Protractor"

The issue with launching a Node.js server in a production environment

Arrange information in table format using Angular Material

Setting a timeout from the frontend in the AWS apigClient can be accomplished by adjusting the

Exploring TypeScript: Implementing a runtime data mapping in place of an interface

Learn how to set up browser targeting using differential loading in Angular 10, specifically for es2016 or newer versions