Ngx-admin: userMenu how to integrate logout event into it?

[ffviixv]

How do I integrate my logout code into the userMenu?

userMenu = [{ title: 'Log out' }];

logout() { this.authService.doLogout(); }

Currently, I can logout by adding a button with logout event but I do not like it and wants to be able to logout via the userMenu.

<button (click)="logout()">Log Out</button>

Guidance please

[Tibing]

Hi @ffviixv , please check this issue https://github.com/akveo/ngx-admin/issues/1637

[ffviixv]

Hi @Tibing , I looked at the issue #1637 and your StackBlitz but still have no luck getting the logout to work or just your code to console log. Using your code [nbContextMenuTag] is unknown property of nb-user. However, if I remove the [] from nbContextMenuTag it removed the error but still nothing happens.

header.component.html
<nb-action *nbIsGranted="['view', 'user']"> <nb-user [nbContextMenu]="userMenu" [nbContextMenuTag]="onMenuItemClick" [name]="userName" [picture]="userPhoto"></nb-user> </nb-action>

header.component.ts
userMenu = [{ title: 'Log out' }]; tag = 'my-context-menu';
logout() { this.authService.doLogout(); }
onMenuItemClick() { this.menuService.onItemClick() .pipe(filter(({ tag }) => tag === this.tag)) .subscribe(bag => console.log(bag)); }

[haidaraM]

According to the documentation, nbContextMenuTag should be the tag value not the callback (onMenuItemClick).
An example here: https://stackblitz.com/edit/angular-wnhtvn

[ffviixv]

did that still doesn't work.

In header.component.html
ng: Can;t bind to nbContextMenuTag since it isn't a known property of button.
<button [nbContextMenu]="userMenu" [nbContextMenuTag]="tag">Show context menu</button>

Remove the [] from nbContextMenuTag remove the error but still doesn't do anything.
<button [nbContextMenu]="userMenu" nbContextMenuTag="tag">Show context menu</button>

header.component.ts
userMenu = [{ title: 'Log out' }];
tag = 'my-context-menu';

constructor(private menuService: NbMenuService,) {
menuService.onItemClick()
.pipe(filter(({ tag }) => tag === this.tag))
.subscribe(bag => console.log(bag));
}

The example on stackblitz is supposed to console log but it doesn't when implemented into ngx-admin.
Read the documentation, viewed the stackblitz, still doesn't work. No idea.

[fabry00]

The following solution is working for me:

header.component.html

<nb-user [nbContextMenu]="userMenu" [name]="user?.name" `[picture]="user?.picture"></nb-user>

header.component.ts

userMenu = [
    { title: 'Profile', icon: 'fa fa-user' },
    { title: 'Settings', icon: 'fa fa-gear' },
    { title: 'Log out', icon: 'fa fa-sign-out' }];

app.component.ts

constructor(private menuService: NbMenuService) {  }

this.menuService.onItemClick()
      .subscribe((event) => {
        this.onContecxtItemSelection(event.item.title);
      });

onContecxtItemSelection(title) {
  console.log('click', title);
}

I had to put the menuService.onItemClick() in app.component.ts (and not in header.component.ts) because otherwise (after logout, login) the onContecxtItemSelection would have been called multiple times.

[ffviixv]

Hi @fabry00 thank you so much.

[Danijel-Mekiho]

Great!!!
It's working well

[malwareoverflow]

perfect solution @fabry00 !

[hplive]

@fabry00 was a good solution for log out session. but i the side bar menu, all the link to pages go throuth that service as well... and i would have to define. how did you do it? just for the log out , settings profile and not for all links?

[hplive]

Hi @ffviixv , please check this issue #1637

it works....but is valid for all menus. evan those in the side bar...do you have a solution just for the menu top bar ? that works fine, but in bgx.admin all links go throuth there... :(