Add event to userMenu (header)

[jorgellose]

http://prntscr.com/j59rot

The userMenu example is not working (or at least it does nothing).
I have been reading in @nebular and they speak about (itemClick) event

TEMPLATE: --> Adding (itemClick) to the example
<nb-action *nbIsGranted="['view', 'user']">
<nb-user [nbContextMenu]="userMenu" (itemClick)="onMenuItemClick($event)" [name]="user?.name" [picture]="user?.picture">

TS:
onMenuItemClick(event) {
console.log("CLICK", event) --> Dont trigger
}

---

node_components/@ nebular/theme/components/menu/menu.component.js
NbMenuItemComponent.prototype.onItemClick = function (item) {
console.log(item); ---> Triggers
this.itemClick.emit(item);
};

Sorry for my english

[gwsampso]

+1

[pablor21]

+1

[aidass9]

+1

[andresmgsl]

+1

[Tibing]

Hi, please, check this pr akveo/nebular#371
We'll merge it asap

[pmadhavan]

Is there a fix? I don't see it in the latest version.

[pmadhavan]

As per @Tibing's documentation I was able add events to the userMenu items. However the tag did not work even while setting the nbContextMenuTag.

header.component.html

<div class="header-container"
     [class.left]="position === 'normal'"
     [class.right]="position === 'inverse'">
  <div class="logo-containter">
    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
    <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
  </div>
  <ngx-theme-switcher></ngx-theme-switcher>
</div>

<nb-actions
  size="medium"
  class="header-container"
  [class.right]="position === 'normal'"
  [class.left]="position === 'inverse'">
  <nb-action *nbIsGranted="['view', 'user']" >
    <nb-user [nbContextMenu]="userMenu"  [name]="user?.name" [picture]="user?.picture" ></nb-user>
  </nb-action>
  <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
  <nb-action class="control-item" icon="nb-email"></nb-action>
  <nb-action class="control-item">
    <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
  </nb-action>
</nb-actions>

header.component.ts

import {Component, Input, OnInit} from '@angular/core';

import {NbMenuService, NbSidebarService} from '@nebular/theme';
import {UserService} from '../../../@core/data/users.service';
import {AnalyticsService} from '../../../@core/utils/analytics.service';

@Component({
  selector: 'ngx-header',
  styleUrls: [ './header.component.scss' ],
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {


  @Input() position = 'normal';

  user: any;

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

  constructor( private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
               private userService: UserService,
               private analyticsService: AnalyticsService ) {
  }

  ngOnInit() {
    this.userService.getUsers()
      .subscribe(( users: any ) => this.user = users.nick);
    this.menuService.onItemClick().subscribe(( event ) => {
      this.onItemSelection(event.item.title);
    })
  }

  onItemSelection( title ) {
    if ( title === 'Log out' ) {
      // Do something on Log out
      console.log('Log out Clicked ')
    } else if ( title === 'Profile' ) {
      // Do something on Profile
      console.log('Profile Clicked ')
    }
  }

  toggleSidebar(): boolean {
    this.sidebarService.toggle(true, 'menu-sidebar');
    return false;
  }

  toggleSettings(): boolean {
    this.sidebarService.toggle(false, 'settings-sidebar');
    return false;
  }

  goToHome() {
    this.menuService.navigateHome();
  }

  startSearch() {
    this.analyticsService.trackEvent('startSearch');
  }


}

[Tibing]

Hi all, I really don't understand what is an issue. I've created stackblitz with an example, please, check it.
If it'll not help you - share your stackblitz/plnkr and I'll try to help you.

[enviniom]

Hi everyone, i did it like @pmadhavan explained and it woks for me, but, when I logout and login again without reload the page, goes directly to logout again, I think that is because the subscription is still alive, this doesn't happens when I reload the page. So I created a button instead, and i'll be waiting for a solution. I need learn more about observable. Sorry my english.

[litchian18]

@enviniom I facing the same problem, How to unsubscribe the subscription.??

[litchian18]

How to dismiss the menu after click ??

[marticrespi]

Hi, I have the same problem as @enviniom, when I am logging in without reload the page, it fires the subscription without doing any click on the item.

EDIT

Here is the solution: #1665

You have to move the subscription from header.component to app.component.

[TheJedhai]

I know this is an old issue, but I think I can provide a better solution than what I've read so far and maybe help someone facing this problem.

When you create the subscription, assign it to a variable of type subscription, like:

import { Subscription } from 'rxjs';

recordsSub: Subscription;
recordsSub = this.menuService.onItemClick().subscribe(( event ) => {
      this.onItemSelection(event.item.title);
    })

and use the rest of @pmadhavan solution:

onItemSelection( title ) {
   if ( title === 'Log out' ) {
     // Do something on Log out
     console.log('Log out Clicked ')
   } else if ( title === 'Profile' ) {
     // Do something on Profile
     console.log('Profile Clicked ')
   }
 }

After that, you use angular's ngOnDestroy to unsubscribe.

ngOnDestroy() {
		this.recordsSub.unsubscribe();
	}

With this you can keep this code on your header.component instead of movin it to app.component. :)
Hope it helps!