0

How to open the mat-menu-items in a new tab when the user clicks on it, i have tried all the possible ways mentioned below, am able to open in a new tab but the current tab is going completely blank until the new tab gets the data.

<mat-menu #apps="matMenu" yPosition="below" xPosition="before" [overlapTrigger]="false">
    <div mat-menu-item routerLink="/requests" class="appsItem mat-body-1 app-high-em">
      <span>{{'Request Extracts' | translate}}  </span>
      <mat-icon class="float-right appsItemIcon ml-2">vertical_align_bottom</mat-icon>
    </div>
    <a mat-menu-item routerLink="/users" class="appsItem mat-body-1 app-high-em" appNewWindow>
       <span>{{'Users' | translate}}  </span>
       <mat-icon class="float-right appsItemIcon ml-2">person_add</mat-icon>
    </a>
    <a mat-menu-item routerLink="/metadata/models" [target]="_blank" class="appsItem mat-body-1 app-high-em">
       <span>{{'Meta Data' | translate}}  </span>
       <mat-icon class="float-right appsItemIcon ml-2">link</mat-icon>
    </a>
    <div mat-menu-item routerLink="/requests" class="appsItem mat-body-1 app-high-em">
       <span>{{'Patient Cohorts' | translate}}   </span>
       <mat-icon class="float-right appsItemIcon ml-2">people</mat-icon>
    </div>
    <div mat-menu-item routerLink="/requests" class="appsItem mat-body-1 app-high-em">
        <span>{{'Markets' | translate}}                   </span>
        <mat-icon class="float-right appsItemIcon ml-2">public</mat-icon>
    </div>
    <a mat-menu-item routerLink="/queue" target="_blank" class=" mat-body-1 app-high-em">
        <span>{{'Job Monitor' | translate}}                   </span>
        <mat-icon class="float-right appsItemIcon ml-2">list_alt</mat-icon>
    </a>
  </mat-menu>
k.s.
  • 2,964
  • 1
  • 25
  • 27
angularfreek
  • 11
  • 5

1 Answers1

0

In my application, I have made a dynamic menu displayed by a button :

    <button mat-button [matMenuTriggerFor]="menulist"><mat-icon>menu</mat-icon>{{menuName}}</button>
    <mat-menu #menulist="matMenu">
      <button *ngFor="let menu of menus" mat-menu-item [routerLink]="menu.link">{{menu.name}}</button>
    </mat-menu>

and in the ts, I have configured the different menus and on the route change, I change the selected menu :

 menus = [
  { name: 'Menu 1', link: '/route1', active: false },
  { name: 'Menu 2', link: '/route2', active: false }
];

constructor(
  public router: Router,
  private location: Location
) {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(({ urlAfterRedirects }: NavigationEnd) => {
      const url = urlAfterRedirects.split(';')[0];
      const urlAsArray = url.split('/');
      this.menus.forEach(menu => {
        menu.active = urlAfterRedirects.startsWith(menu.link);
        if (menu.active) {
          this.menuName = menu.name;
        }
      });
    });
}

I hope it could help you.

Regards

Adrien PESSU
  • 527
  • 4
  • 13