CODEWITHSUNDEEP
javascriptangularjs
kmilo93sd
kmilo93sd

Reputation: 901

angular js ng-if is not getting return value from async function

I am evaluating a function in a ng if to know if the user has permission to perform an action. The problem is that the function to evaluate makes a call to the backend, and apparently does not work correctly next to the ng-if, since it prints an empty object and not the result that the function returns.

I'm showing the result into the html with this to know what the function is responding to:

{{organizationController.isAllowedToInvite ()}}

this print to me an empty object {}

this is the function that I am evaluating:

self.isAllowedToInvite = () => {

      organizationRoleService.getUserPermissions(self.organizationId)
        .then((response) => {
          const userPermissions = response.data;

          if (userPermissions && userPermissions.organizationPermissions >= 4){
            return true;
          }
          return false;
        }, (error) => {
          console.log(error);
        });
    };

this return a true or false, this works well by itself.

Why can not I show the result of the function when I print in the html? because instead of showing true / false it shows me an empty object {}?

i want it show me true or false, so I can evaluate it in the ng if correctly.

this is my ng-if, obviusly this does not work becouse has a {} value.

ng-if="organizationController.isAllowedToInvite()"

Upvotes: 0

Views: 125

Answers (1)

Karim
Karim

Reputation: 8632

there's an async operation in your method, you cannot statically check the condition in the if. You should call the method on the controller instantiation and then use a flag that you set to true in case all the conditions are met and check that flag in the template

self.isAllowedToInvite = () => {
      self.isAllowed = false;
      organizationRoleService.getUserPermissions(self.organizationId)
        .then((response) => {
          const userPermissions = response.data;

          if (userPermissions && userPermissions.organizationPermissions >= 4){
            self.isAllowed = true;
          }
        }, (error) => {
          console.log(error);
        });
    };

self.isAllowedToInvite();

and in your template

ng-if="organizationController.isAllowed"

Upvotes: 2

Related Questions