rxjs Observable mixed with pre-resolved data

Question

I have two observable data streams. One retrieves an account, one gets permissions.

What I need to do is check if the current user has the role of admin, or has the role of external and the current account does not have a flag set. But how to do that with rxjs is eluding me.

Here is a stripped down test case to show what I'm trying to do, but because all of the data isn't there when it runs (either the account is null, or the permissions haven't been loaded yet), it errors out.

How can I make this work?

I'm using rxjs6.

export class ViewComponent implements OnInit {
    private account: AdminUser;
    private permissions: Permissions;

    constructor(private _service: AdminUserService,
                private _permissions: PermissionsService,
                private _activatedRoute: ActivatedRoute) {
    }

    canEdit(): boolean {
        let isAdmin = this.permissions.hasRole('Admin');
        return isAdmin || (this._permissions.hasRole('External') && !this.account.isActiveDirectory);
    }

    ngOnInit() {
        this._permissions
            .getPermissions()
            .subscribe(p => this.permissions = p);

        this._activatedRoute.params.subscribe(
            params => {
                    this._service.get(params.id)
                        .pipe(map(account => this.account = account))
                        .subscribe();
            });
    }
}

Answer 1

You can leave your data as observables without subscribing in your component. Rxjs has many operators and static functions to shape, filter, and transform them to suit your needs.

Instead of defining account as AdminUser and permissions as Permissions; let's define them as Observable<AdminUser> and Observable<Permissions>.

We can then use combineLatest the create a single observable that emits the canEdit value.

export class ViewComponent {
  private id$ = this._activatedRoute.params.pipe(map(params => params.id));
  private account$ = this.id$.pipe(switchMap(id => this._service.get(id)));
  private permissions$ = this._permissions.getPermissions();
  
  public canEdit$ = combineLatest([this.account$, this.permissions$]).pipe(
    map(([account, permissions]) => 
      permissions.hasRole("Admin") ||
      (permissions.hasRole("External") && !account.isActiveDirectory)
    )
  );

  constructor(
    private _service: AdminUserService,
    private _permissions: PermissionsService,
    private _activatedRoute: ActivatedRoute
  ) { }
}

If you aren't familiar with switchMap, it basically subscribes to an "inner observable" for you and emits the result(s). In this case, taking the id and making the call to service.get(id).

---

It seems likely you'll also want to use the account info in your template along with the canEdit value. Instead of emitting a single boolean, we can emit an object that contains all the data our view needs (a view model):

export class ViewComponent {
  private id$ = this._activatedRoute.params.pipe(map(params => params.id));
  private account$ = this.id$.pipe(switchMap(id => this._service.get(id)));
  private permissions$ = this._permissions.getPermissions();
  
  public vm$ = combineLatest([this.account$, this.permissions$]).pipe(
    map(([account, permissions]) => {
      const canEdit = permissions.hasRole("Admin") || (permissions.hasRole("External") && !account.isActiveDirectory)

      return { account, canEdit };
    })
  );

  constructor(
    private _service: AdminUserService,
    private _permissions: PermissionsService,
    private _activatedRoute: ActivatedRoute
  ) { }
}

You can now use a single async pipe in your template to handle the subscribing for you:

<ng-container *ngIf="vm$ | async as vm">
  <h1>{{ vm.account.name }}</h1>
  ...
  <button *ngIf="vm.canEdit">Edit</button>
</ng-container>

Answer 2

I only guess what your goal might be. But examining your code I think that you search for some solution like this.

export class ViewComponent implements OnInit, OnDestroy {
    // provide this information as boolean
    canEdit = false;

    private account: AdminUser;
    private permissions: Permissions;

    // allways collect at start and remove all subscriptions when leaving the component
    private subscription: Subscription = new Subscription();


    constructor(private _service: AdminUserService,
                private _permissions: PermissionsService,
                private _activatedRoute: ActivatedRoute) { }

   

    ngOnInit(): void {
                  
        this.subscription.add(  
            this._permissions
                .getPermissions()
                .subscribe(permissions => {
                    this.permissions = permissions;

                    this.checkPermissions();
            })
        );

        this.subscription.add(
            this._activatedRoute.params.subscribe(
                params => {
                    this._service.get(params.id).subscribe(account =>
                    this.account = account);
                        
                    this.checkPermissions();
            })
        );
    }

    ngOnDestroy(): void {
        // unsubscribe all subscriptions
        this.subscription.unsubscribe();
    }


    checkPermissions(): void {
        if (this.permissions && this.account) {
            this.canEdit = this.permissions.hasRole('Admin') ||
            (this._permissions.hasRole('External') && !this.account.isActiveDirectory);
        }
    }

And in your HTML I guess you want to (de)activate a button or so. Then do it this way.

<button  [disabled]="!canEdit">Edit something</button>