Boolean value undefined outside of subscribtion?

Question

I have an API call which ends in a boolean check. I'd like to create new users but if an e-mail is exists in the db i want to set canAddUser = false. I do the following:

  canAddUser: boolean;

  setNewUserValues() {
    if (this.formUser.email) {
      this.checkExistingEmail();
    }
  }

  checkExistingEmail() {
    this.userService.findPrivilegedUsersUsingGET().subscribe(users => {
      const mailIndex = users.findIndex(user => user.email === this.formUser.email);
      mailIndex !== -1 ? this.canAddUser = false : this.canAddUser = true;
      console.log(this.canAddUser);
    });
  }

If I log the boolean to the console where I am currently doing, I get the right value. However if I log it elsewhere it's undefined first! then if i trigger the button that fires setNewUserValues() it gets the value right again. What am I missing so badly?

EDIT

Somewhat solved my issue.

  setNewUserValues() {
    if (this.formUser.email) {
      this.checkExistingEmail();
    }
  }

  checkExistingEmail() {
    this.userService.findPrivilegedUsersUsingGET().subscribe(users => {
      this.mailIndex = users.findIndex(user => user.email === this.formUser.email);
    });
    this.validateEmail(this.mailIndex);
    console.log(this.canAddUser);
  }

  private validateEmail(index: number) {
    index !== -1 ? this.canAddUser = false : this.canAddUser = true;
  }

If I pass an e-mail that's existing i got the correct value but if i pass one that's not in the db yet i get false value first then if i trigger it once more then the value is fine again.

Answer 1

You can not guarantee to have your flag already assigned to anywhere in your code if you don't subscribe the async operation.

What I would do is change the boolean flag to the Subject:

canAddUser$: Subject<boolean>;

Emit the value when needed:

mailIndex !== -1 ? this.canAddUser$.next(false): this.canAddUser$.next(true);
// this.canAddUser$.next(mailIndex === -1);

And when you need it, subscribe to it:

someFunction() {
    this.canAddUser$.subscribe(canAdd => {
        // Here *canAdd* is a boolean
    })
}

Answer 2

Your findPrivilegedUsersUsingGET function is asynchronous. This means it can take a few seconds or even minutes to complete. canAddUser will only be true or false at the end of the async call.

canAddUser: boolean; // undefined 


// this can take a while to complete.
this.userService.findPrivilegedUsersUsingGET().subscribe(users => {
      const mailIndex = users.findIndex(user => user.email === this.formUser.email);
      mailIndex !== -1 ? this.canAddUser = false : this.canAddUser = true;

      // do work here          
      console.log(this.canAddUser);
      this.doWork();
});

doWork() {
     console.log(this.canAddUser);
}

Answer 3

Basic answer, but you could just initialize your canAddUser to whatever you want be the default.

canAddUser = false; for example.

Answer 4

You can eagerly load the list of users, and then pass the users to your component's functions via the template.

In your component:

public users$: Observable<any[]>;

public ngOnInit() {
    this.users$ = this.userService.findPrivilegedUsersUsingGET().pipe(share());
}

setNewUserValues(users: any[]) {
    if (this.formUser.email) {
        this.checkExistingEmail(users);
    }
}

checkExistingEmail(users: any[]) {
   this.mailIndex = users.findIndex(user => user.email === this.formUser.email);
   this.validateEmail(this.mailIndex);
   console.log(this.canAddUser);
}

private validateEmail(index: number) {
   index !== -1 ? this.canAddUser = false : this.canAddUser = true;
}

In your template:

<ng-container *ngIf="users$ | async as users">
    <button (click)="setNewUserValues(users)">Example</button>
</ng-container>
<ng-container *ngIf"!(users$ | async">
    Loading users...
</ng-container>

That is one way to remove the side-effects of mixing procedural programming and reactive programming.

The other approach is to make checkExistingEmail() return an observable (or a Promise).

public constructor(private _change: ChangeDetectorRef) {}

setNewUserValues() {
  if (this.formUser.email) {
     this.checkExistingEmail(this.formUser.email).subscribe(canAddUser => {
         console.log("canAddUser:", canAddUser);
         this.canAddUser = canAddUser;
         this._change.markForCheck();
     });
  }
}

public checkExistingEmail(email): Observable<boolean> {
   return this.userService.findPrivilegedUsersUsingGET().pipe(
      map(users => users.findIndex(user => user.email === email) !== -1)
   );
}

The above will print the boolean result to the console, but I don't know what you want to do with this result. The operation is completed async and we need to tell Angular that the state of the component has changed, and the view should be updated so I call "markForCheck()", but if you aren't using OnPush change detection then this might not be required.

As a general rule. If you write code like this.XXXX = YYYY; inside an async callback while inside a component. You're going to run into side-effects, because you are mixing procedural programming with reactive programming.

Often people will ask the question "how do I return a value from an async function". I often cringe when I see their example source code using the this reference to update a property.

Some further reading about reactive programming might help:

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

https://egghead.io/courses/introduction-to-reactive-programming

It's a good idea to refresh yourself on the subject of reactive forms in Angular:

https://angular.io/guide/reactive-forms