Implementing NbRoleProvider

Question

I'm implementing an NbRoleProvider in my Angular application with Nebular.

I've implemented it as follow:

@Injectable()
export class RoleProvider implements NbRoleProvider {

    constructor(private store: Store<IAppStore>) {
    }

    getRole(): Observable<string[]> {

        const loggedUser = this.store.select<IUser>(x => x.loggedUserStore.loggedUser);

        let result = [];
        loggedUser.subscribe(data => {
            if (data != null) {
                result = data.roles; // returns ['admin']
            }
        });
        return of(result);

        // this works!!
        // return of(['admin']);
    }
}

If I return a fixed array role like ['admin'] all works like expected. If I try to subscribe the value from the store it won't works. Debugging I see that the getRole method is called several times when the data object is still null and then several time when it has been loaded with proper array list.

It seems that *nbIsGranted directive is rendered in the first moment when subscribe is still wait the data from the store.

What I miss?

Answer 1

I would try returning Observable directly from store like:

import { map } from 'rxjs/operators';

@Injectable()
export class RoleProvider implements NbRoleProvider {

    constructor(private store: Store<IAppStore>) {}

    getRole(): Observable<string[]> {
      const loggedUser = this.store.select<IUser>(x => x.loggedUserStore.loggedUser);

      return loggedUser.pipe(map(data => data ? data.roles : []));
    }
}