How can Angular components that are not directly related subscribe to and receive changes using a declarative approach?

Question

How can Angular components that are not directly related subscribe to and receive changes using a declarative approach?

Here's the issue at hand:

I'm facing a problem with my Dashboard component. The Dashboard consists of a Sidebar and Navbar as child components.
On the Sidebar, I have applied a custom permission directive to the links to determine if the user has permission to view them or not.
The Navbar includes options for Admin, Manager, and staff roles. Whenever the user changes roles, I need to update the sidebar links based on the new scope permissions.

I attempted to pass an observable to the sidebar like this:

scope$: Observable<Roles> = this.scopeService.scope$;

using the async pipe:

<app-sidebar [scope]="scope$ | async"></app-sidebar>

and subscribing in the ngOnInit method:

ngOnInit(): void {
    this.scopeService.scope$.subscribe();
  }

However, this approach didn't work as expected. I've come across suggestions to use event emitters, but I prefer a declarative pattern for this task.

For more details, you can check out this stackblitz link.

angular typescript declarative

Answer 1

Answer №1

Understanding how the async pipe works is crucial in this scenario. The async pipe automatically subscribes to an observable and retrieves its value. However, if you simply want to pass the observable without subscribing to it, then there's no need for the async pipe. You can achieve this by:

<app-sidebar [scope$]="scope$"></app-sidebar>

Then, in the app-sidebar component:

@Input
scope$: Observable<Roles> = this.scopeService.scope$;

ngOnInit(): void {
    this.scope$.subscribe();
  }

Upon reviewing your stackblitz, it's apparent that the issue lies in your has-permission directive. Instead of using a snapshot of the scope, you should subscribe to it like so:

  ngOnInit(): void {
    this.scopeService.scope$.subscribe((newScope) => {
      this.scope = newScope;
      this.checkPermissions();
    });
  }

This approach ensures that the checkPermissions() method is invoked every time the scope changes. Additionally, you may need to adjust how you display elements to address existing permission issues. Consider updating the showElement method as follows:

  showElement(canShow: boolean): void {
    this.viewContainer.clear();
    if (canShow) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

Answer 2

Understanding how the async pipe works is crucial in this scenario. The async pipe automatically subscribes to an observable and retrieves its value. However, if you simply want to pass the observable without subscribing to it, then there's no need for the async pipe. You can achieve this by:

<app-sidebar [scope$]="scope$"></app-sidebar>

Then, in the app-sidebar component:

@Input
scope$: Observable<Roles> = this.scopeService.scope$;

ngOnInit(): void {
    this.scope$.subscribe();
  }

Upon reviewing your stackblitz, it's apparent that the issue lies in your has-permission directive. Instead of using a snapshot of the scope, you should subscribe to it like so:

  ngOnInit(): void {
    this.scopeService.scope$.subscribe((newScope) => {
      this.scope = newScope;
      this.checkPermissions();
    });
  }

This approach ensures that the checkPermissions() method is invoked every time the scope changes. Additionally, you may need to adjust how you display elements to address existing permission issues. Consider updating the showElement method as follows:

  showElement(canShow: boolean): void {
    this.viewContainer.clear();
    if (canShow) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

How can Angular components that are not directly related subscribe to and receive changes using a declarative approach?

Answer №1

Similar questions

Angular project icons not displaying in the browser

Tips for validating an Angular form with material form fields:

Guide on displaying a tooltip for an object in an Angular component using Bootstrap syntax

Tips on utilizing index and eliminating React Warning: Ensure every child within a list has a distinct "key" prop

Get a single object from an array with .single method provided by @ngrx

Using Bootstrap 3 Modal in an Angular 4 Application: A Step-by-Step Guide

Is there a way to invoke a function within a mat-error element?

What is the solution to prevent angular-material components from covering my fixed navbar?

Asynchronous and nested onSnapshot function in Firestore with await and async functionality

There is no matching overload for this call in Angular. Error code: TS2769

Swapping the content of the API response with Angular 11 in the HTML

Providing Access to Data Across Various Modules

Zod data structure featuring optional fields

The ion-progress-bar does not display properly when embedded within an ng-template with the id "loading"

Using path aliases in a Typescript project with Typescript + Jest is not a viable option

Issue with Angular 2 view not refreshing after receiving ipcRenderer.on event in Electron

Use rowSelected to set the initial selected rows in an Angular Kendo UI grid

Exporting ExpressJS from a TypeScript wrapper in NodeJS

A step-by-step guide on sending a fetch request to TinyURL

The promise briefly returns a placeholder object before resolving with the actual response