Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Question

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Within my Angular 6 application, I am facing an issue with a variable named "permittedPefs" that is assigned a value after an asynchronous HTTP call.

 @Injectable()
 export class FeaturesLoadPermissionsService {
    permittedPefs = [];
    constructor() {       
       this.loadUserPefsService.getUserRolePefs(roleId)
                               .subscribe(
              (returnedListPefs) => {
                this.permittedPefs = returnedListPefs;
              },
              error => {
                console.log(error);
              });
    }
}

In another function, I am utilizing the same variable: permittedPefs.

However, since it starts off empty and gets populated at a delayed time, I need to wait for it before reusing it.

I attempted implementing async-await, where my objective is to ensure that permittedPefs has obtained an object value:

  async checkPefPresence(pefId) {
    const listPefs = await this.permittedPefs
  }

What steps should be taken to resolve this issue?

javascript angular typescript asynchronous ecmascript-6

Answer 1

Answer №1

Storing the Observable returned by loadUserPefsService.getUserRolePefs method allows you to subscribe to it at a later time for access to user role permissions.

@Injectable()
export class FeaturesLoadPermissionsService {
    permittedPefs = [];
    constructor() {
        this.userRolePefsObservable = this.loadUserPefsService.getUserRolePefs(roleId);
    }
}

checkPefPresence(pefId) {
    let listPefs;
    this.userRolePefsObservable.subscribe(
        (returnedListPefs) => {
            listPefs = returnedListPefs;
        },
        error => {
            console.log(error);
        });
}

Answer 2

Storing the Observable returned by loadUserPefsService.getUserRolePefs method allows you to subscribe to it at a later time for access to user role permissions.

@Injectable()
export class FeaturesLoadPermissionsService {
    permittedPefs = [];
    constructor() {
        this.userRolePefsObservable = this.loadUserPefsService.getUserRolePefs(roleId);
    }
}

checkPefPresence(pefId) {
    let listPefs;
    this.userRolePefsObservable.subscribe(
        (returnedListPefs) => {
            listPefs = returnedListPefs;
        },
        error => {
            console.log(error);
        });
}

Answer 3

Answer №2

Utilize a behaviorSubject for managing permissions

  @Injectable()
    export class FeaturesLoadPermissionsService {

      permittedPefs: BehaviorSubject<any[]> = new BehaviorSubject([]);

      constructor() {
        this.loadUserPefsService.getUserRolePefs(roleId)
          .subscribe((returnedListPefs) => {
            this.permittedPefs.next(returnedListPefs);
          },
            error => {
              console.log(error);
            });
      }
    }

Then wherever you need to check for it (remember to unsubscribe when finished)

If it needs to be asynchronous, you can handle it like the example below

  async checkPefPresence(pefId): Promise {
    return new Promise((resolve, reject) => {
      this.featuresLoadPermissionsService.permittedPefs.subscribe(listPefs  => {
          //handle any necessary checks here 
          resolve();
      },reject);
    })

Answer 4

Utilize a behaviorSubject for managing permissions

  @Injectable()
    export class FeaturesLoadPermissionsService {

      permittedPefs: BehaviorSubject<any[]> = new BehaviorSubject([]);

      constructor() {
        this.loadUserPefsService.getUserRolePefs(roleId)
          .subscribe((returnedListPefs) => {
            this.permittedPefs.next(returnedListPefs);
          },
            error => {
              console.log(error);
            });
      }
    }

Then wherever you need to check for it (remember to unsubscribe when finished)

If it needs to be asynchronous, you can handle it like the example below

  async checkPefPresence(pefId): Promise {
    return new Promise((resolve, reject) => {
      this.featuresLoadPermissionsService.permittedPefs.subscribe(listPefs  => {
          //handle any necessary checks here 
          resolve();
      },reject);
    })

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Answer №1

Answer №2

Similar questions

Utilize the <wbr> tag within FormattedMessage and assign it as a value while coding with TypeScript

Merge requirejs modules using build script

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

The function that iterates through the 'categoria' state and returns a new array is not functioning properly

Using ng-repeat in conjunction with ui-router conditions

Retrieving a dynamic JSON object for the MusicBrainz application using AngularJS

HTML elements generated dynamically do not possess any jQuery properties

TypeScript: creating an interface property that relies on the value of another

Dynamically allocate a controller to an element following the Bootstrap process

Promise resolves prematurely before the completion of the process

What types of modifications do ViewChildren and ContentChildren QueryLists keep an eye out for?

How can we properly access the DOM element generated by an {#each} loop in Svelte when it is clicked?

Vue.js mobile app may show a loaded DOM that remains invisible until the screen is tapped

What is the best way to retrieve ul li values using AngularJS?

What impact do Angular Signals have on RXJS Observables and how does this influence change detection within the framework?

Assigning a value to a variable from a method in Vue: a step-by-step guide

React - The content of my JSON.String vanishes upon being placed inside a div element

Navbar Username in Next.js with Typescript and Supabase Integration

Altering the hover functionality for dynamically created class elements