Probleme with angular material NavBar?

I have defined an array in which I have the list of label and icon names that will appear in the nav bar and Then in the html I have used Angular material to loop over the list to display all labels and icons. but how can I add the onclick("logout()") or the href:'some route'? the code is bellow , I have added href property to menuItems table but I can call it in the html even with {{item.href}} only display the text not doing the action.

This is Header Component:///////

export class HeaderComponent implements OnInit{

  constructor(private userService: UserService) {
  }
  isLoggedIn: boolean = false;
  menuItems: MenuItem[] = [

    {
      label: 'Offers',
      icon: 'notes',
      href:'',
      showOnMobile: false,
      showOnTablet: true,
      showOnDesktop: true
    }
    ,
    {
      label: 'Bookmark',
      icon: 'bookmark',
      href:'',
      showOnMobile: false,
      showOnTablet: true,
      showOnDesktop: true
    },
    {
      label: 'Application',
      icon: 'video_stable',
      href:'',
      showOnMobile: false,
      showOnTablet: false,
      showOnDesktop: true
    },
    {
      label: 'Claim',
      icon: 'send',
      href:'',
      showOnMobile: false,
      showOnTablet: false,
      showOnDesktop: true
    },
    {
      label: 'Forum',
      icon: 'forum',
      href:'',
      showOnMobile: true,
      showOnTablet: true,
      showOnDesktop: true
    },
    {
      label: 'log out',
      icon: 'logout',
      href:'click(logout()',
      showOnMobile: false,
      showOnTablet: false,
      showOnDesktop: false
    },
    {
      label: 'Profile',
      icon: 'profile',
      href:'',
      showOnMobile: false,
      showOnTablet: false,
      showOnDesktop: false
    },



  ];


  ngOnInit(): void {
  }

  logout(){
    this.userService.signout()
  }




//this is the html :::::

<mat-toolbar fxLayout="row" color="primary">
  <span fxFlex><mat-icon>home</mat-icon> Esprit Mobility </span>

  <button
    mat-button
    *ngFor="let item of menuItems"
    [fxShow]="item.showOnDesktop"
    [fxShow.xs]="item.showOnMobile"
    [fxShow.sm]="item.showOnTablet"
  >
    <mat-icon class="mr">{{item.icon}}</mat-icon>
    {{item.label}}
  </button>
  <ng-container>
    <button mat-icon-button [matMenuTriggerFor]="dropMenu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #dropMenu="matMenu">
      <ng-container *ngFor="let item of menuItems">
        <div
          [fxShow]="!item.showOnDesktop"
          [fxShow.sm]="!item.showOnTablet"
          [fxShow.xs]="!item.showOnMobile"
        >
          <button mat-menu-item  >
            <mat-icon class="mr">{{item.icon}}</mat-icon>
            {{item.label}}
          </button>
          <mat-divider></mat-divider>
        </div>
      </ng-container>
    </mat-menu>
  </ng-container>
</mat-toolbar>

Thanks in advance for any help

                                             . 

From the view perspective, I would adjust the button. It should be instructed to trigger a (click) method. The if statement ensures that the href cannot be null / undefined.

<button mat-menu-item (click)="item.href ? item.href(): ''">
            <mat-icon class="mr">{{item.icon}}</mat-icon>
            {{item.label}}
          </button>

From the component perspective, here is how the logout object looks:

{
  label: 'log out',
  icon: 'logout',
  href: this.logout,
  showOnMobile: false,
  showOnTablet: false,
  showOnDesktop: false,
},

Take a look at href value - it does not contain (), since it would immediately invoke a function