CODEWITHSUNDEEP
htmlangularadmin
selavis production
selavis production

Reputation: 31

How to get the name menu in navigation when I click it in Angular

I have an issue with my Angular project. I can't get only one component of menu and put it on nav to show which menu is clicked.

This is my header.component.html

     <mat-nav-list>
      <mat-list-item>
        <a style="color: white;" *ngFor="let menuitem of menuItems.getMenuitem()">{{ menuitem.name }}</a>
      </mat-list-item>
     </mat-nav-list>

This is my header.component.ts

import { MediaMatcher } from '@angular/cdk/layout';
import { Router } from '@angular/router';
import {
  ChangeDetectorRef,
  Component,
  NgZone,
  OnDestroy,
  ViewChild,
  HostListener,
  Directive,
  AfterViewInit
} from '@angular/core';
import { MenuItems } from '../../../shared/menu-items/menu-items';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: []
})

export class AppHeaderComponent implements OnDestroy, AfterViewInit {
  mobileQuery: MediaQueryList;

  private _mobileQueryListener: () => void;

  constructor(
    changeDetectorRef: ChangeDetectorRef,
    media: MediaMatcher,
    public menuItems: MenuItems
  ) {
    this.mobileQuery = media.matchMedia('(min-width: 768px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
  ngAfterViewInit() {}


}

This is my menu-items.ts when i get menu names

import { Injectable } from '@angular/core';


export interface BadgeItem {
  type: string;
  value: string;
}

export interface Menu {
  state: string;
  name: string;
  type: string;
  icon: string;
  badge?: BadgeItem[];
}

const MENUITEMS = [
  { state: 'home', type: 'link', name: 'HOME', icon: 'home' },
  { state: 'dashboard', name: 'DASHBOARD', type: 'link', icon: 'dashboard' },
  { state: 'organizzazioni', type: 'link', name: 'ORGANIZZAZIONI', icon: 'domain' },
  { state: 'registri', type: 'link', name: 'REGISTRI', icon: 'assignment' },
  {
    state: 'aprovazioni', type: 'link', name: 'APROVAZIONI', icon: 'view_headline', badge: [
      { type: 'red', value: '1' }]
  },
  { state: 'impatto', type: 'link', name: 'IMPATTO', icon: 'tab' },
  { state: 'informative', type: 'link', name: 'INFORMATIVE', icon: 'web' },
  { state: 'violazioni', type: 'link', name: 'VIOLAZIONI', icon: 'vertical_align_center' },
];

@Injectable()
export class MenuItems {
  getMenuitem(): Menu[] {
    return MENUITEMS;
  }
}

What am I missing?

enter image description here

Upvotes: 2

Views: 4436

Answers (4)

Hossam
Hossam

Reputation: 363

Add menuItemClick method to your menuItem class and this method should take the clicked item as a parameter then handle item click event in your html

Something like that

export class MenuItems {
  getMenuitem(): Menu[] {
   return MENUITEMS;
  }
  menuItemClick(MenuItem: Menu){
   // Do something
 }
}

And in your html

 <mat-nav-list>
  <mat-list-item>
    <a style="color: white;" *ngFor="let 
       menuitem of menuItems.getMenuitem()" (click)="menuItems.menueItemClick(menuitem)">{{ menuitem.name }}</a>
  </mat-list-item>
 </mat-nav-list>

Upvotes: 0

Sagar Devkota
Sagar Devkota

Reputation: 1192

Add click event on html file (... Is portion of your code)

<a ... (click)="handleMenuClick(menuitem)"></a>

In your header ts file add method

handleMenuClick (item) { alert(item.name) }

So inside that function get value, and do any desired task to change UI based on this selected item, I have just added alert to show current item

Upvotes: 1

L. Iwaszkiewicz
L. Iwaszkiewicz

Reputation: 1

You need to define that method in your controller file

Upvotes: 0

Nichola
Nichola

Reputation: 532

How about adding a click event and react on it in the navigation bar:

 <mat-nav-list>
      <mat-list-item>
        <a style="color: white;" *ngFor="let menuitem of menuItems.getMenuitem()" (click)="menuItemClick(menuitem)">{{ menuitem.name }}</a>
      </mat-list-item>
     </mat-nav-list>

Upvotes: 2

Related Questions