Update the disabled state following the onInit event

Question

Update the disabled state following the onInit event

Currently, I am developing an angular application at my workplace that requires implementing permissions. The backend stores permissions as either 1 or 0, and the frontend queries a service to retrieve the user's permission. If the user lacks permission for a specific action, the corresponding button is disabled. After careful consideration, we concluded that the most effective solution would be to save the permission to session storage on application startup and retrieve it from there whenever necessary.

This approach works flawlessly once the application launches. Every page successfully reads the permission and disables the appropriate buttons. However, I encountered an issue during the initial launch of the application. Since the permission retrieval is an asynchronous process, the application continues to start up while waiting for the permission to be fetched. As the default permission is set to none, the first page displays a disabled button even after obtaining the permission due to being created before the asynchronous call. A manual refresh resolves this issue.

I have been exploring ways to either detect changes in session storage and update the initial component accordingly or ensure that the application waits for the permission retrieval process to complete before continuing the startup sequence. Any guidance on this matter would be greatly appreciated.

-Thank you

angular typescript

Answer 1

Answer №1

You can give this a try, it has worked well for me:

First, create a service named BroadCasterService -

import { Injectable } from '@angular/core';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { filter, map } from 'rxjs/operators';

export class BroadcasterModel {
key: string=''
data: any;
}
@Injectable({
providedIn: 'root'
})
export class BroadCasterService {
public title = new BehaviorSubject('');
private subject = new Subject<BroadcasterModel>();
public sideNavToggleSubject: BehaviorSubject<any> = new 
BehaviorSubject(null);
broadcast(key:string, data:any) {
    this.subject.next({ key: key, data: data });
}
on(key:string): Observable<any> {
    return this.subject.pipe(filter(m => m.key == key), map(m => 
m.data));
}
setTitle(title: string) {
    this.title.next(title);
}
public toggle(data:any) {
    return this.sideNavToggleSubject.next(data);
  } 
}

Next, import this service into your component where you need to set session data -

import { BroadCasterService } from '../services/broad-caster.service';

Include the service in your constructor -

 constructor(private broadcastService: BroadCasterService)

Along with setting the session data, also set the permission data in the broadcast function -

this.sharedService.getPermission('').subscribe((res: any) => {
  this.storage.setLocalStorageData('permissionData', res?.data, true);
  this.broadcastService.broadcast("permissionData", res?.data);
});

Use the broadcast service to handle permissions -

let modules :any;
 modules = localStorage.getItem("permissionData");
 this.broadcastService.on('permissionData').subscribe(cic => {
        modules = cic; //this keeps the data until the page is refreshed
 });

After refreshing the page, you can retrieve the permission data from session storage.

I believe this solution will be beneficial for you.

Answer 2

You can give this a try, it has worked well for me:

First, create a service named BroadCasterService -

import { Injectable } from '@angular/core';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { filter, map } from 'rxjs/operators';

export class BroadcasterModel {
key: string=''
data: any;
}
@Injectable({
providedIn: 'root'
})
export class BroadCasterService {
public title = new BehaviorSubject('');
private subject = new Subject<BroadcasterModel>();
public sideNavToggleSubject: BehaviorSubject<any> = new 
BehaviorSubject(null);
broadcast(key:string, data:any) {
    this.subject.next({ key: key, data: data });
}
on(key:string): Observable<any> {
    return this.subject.pipe(filter(m => m.key == key), map(m => 
m.data));
}
setTitle(title: string) {
    this.title.next(title);
}
public toggle(data:any) {
    return this.sideNavToggleSubject.next(data);
  } 
}

Next, import this service into your component where you need to set session data -

import { BroadCasterService } from '../services/broad-caster.service';

Include the service in your constructor -

 constructor(private broadcastService: BroadCasterService)

Along with setting the session data, also set the permission data in the broadcast function -

this.sharedService.getPermission('').subscribe((res: any) => {
  this.storage.setLocalStorageData('permissionData', res?.data, true);
  this.broadcastService.broadcast("permissionData", res?.data);
});

Use the broadcast service to handle permissions -

let modules :any;
 modules = localStorage.getItem("permissionData");
 this.broadcastService.on('permissionData').subscribe(cic => {
        modules = cic; //this keeps the data until the page is refreshed
 });

After refreshing the page, you can retrieve the permission data from session storage.

I believe this solution will be beneficial for you.

Answer 3

Answer №2

Hey there! I've put together a sample process-diagram for you: Check out this diagram

https://i.sstatic.net/ENHPz.png

You have a few options for implementing something similar:

Utilizing HttpInterceptors + UI-Spinner for all backend requests. Tutorials: Angular show spinner for every HTTP request with very less code changes Implementing global loaders using HttpInterceptors
Developing a custom solution specific to this case (without HttpInterceptor)
Incorporating resolvers

Answer 4

Hey there! I've put together a sample process-diagram for you: Check out this diagram

https://i.sstatic.net/ENHPz.png

You have a few options for implementing something similar:

Utilizing HttpInterceptors + UI-Spinner for all backend requests. Tutorials: Angular show spinner for every HTTP request with very less code changes Implementing global loaders using HttpInterceptors
Developing a custom solution specific to this case (without HttpInterceptor)
Incorporating resolvers

Update the disabled state following the onInit event

Answer №1

Answer №2

Similar questions

Upon successfully logging into the app, Azure AD B2C integrated with MSAL and Angular will automatically redirect users to the login page

The issue with the Angular 5 HttpClient GET-Request not closing persists

The Angular Material Table Collapse feature offers dynamic collapsing similar to jQuery Datatable

What is the process for converting/executing TypeScript into JavaScript?

Troubleshooting Angular4 and TypeScript Compile Error TS2453: A Comprehensive

How can one determine the source of change detection activation in Angular 2?

How can I use Laravel to enter data using the post method?

Retrieving the ng-content from an ng-template within one component and passing it to another component

Angular 7 routing glitches causing page refresh issues

Setting up Template-driven Form in Angular 7

Choosing a particular checkbox with changing identifiers in Cypress: A guide

How to pass parameters from a directive to a child component in Angular

Learn the process of uploading files with the combination of Angular 2+, Express, and Node.js

What in the world is going on with this Typescript Mapped type without a right-hand side?

What is the method for activating a button when a user inputs the correct email address or a 10-digit mobile number

Tips on accessing validator errors in Angular

Combine the selected values of two dropdowns and display the result in an input field using Angular

Angular 2, Release Candidate 5 - Dropdown form includes mysterious "phantom" choice

What is the best way to transform RestApi object information into an Array?

Filter an array in Angular 2 and add additional data to it