Fix for ShankyTiwari#98

Author: ShankyTiwari

projects/ng-material-multilevel-menu/src/lib/app.model.ts

@@ -14,6 +14,7 @@ export interface MultilevelNodes {
   hidden?: boolean;
   link?: string;
   externalRedirect?: boolean;
+  hrefTargetType?: string;
   data?: any;
   items?: MultilevelNodes[];
   onSelected?: Function;

projects/ng-material-multilevel-menu/src/lib/constants.ts

@@ -8,5 +8,6 @@ export const CONSTANT = {
     DEFAULT_SELECTED_FONT_COLOR: `#1976d2`,
     DEFAULT_LIST_BACKGROUND_COLOR: `transparent`,
     DEFAULT_LIST_FONT_COLOR: `rgba(0,0,0,.87)`,
+    DEFAULT_HREF_TARGET_TYPE: '_self',
     ERROR_MESSAGE: `Invalid data for material Multilevel List Component`
 };

projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.html

@@ -22,7 +22,7 @@
 </div>
 
 <ng-template #linkTemplate>
-  <a class="anml-link" *ngIf="node.externalRedirect" [href]="node.link">
+  <a class="anml-link" *ngIf="node.externalRedirect" [href]="node.link" [target]="getHrefTargetType()">
     <ng-container *ngTemplateOutlet="linkLabelOutlet"></ng-container>
   </a>
   <a class="anml-link" *ngIf="!node.externalRedirect" [routerLink]="node.link">

projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.ts

@@ -174,6 +174,12 @@ export class ListItemComponent implements OnChanges, OnInit {
     }
     return this.node.imageIcon;
   }
+  getHrefTargetType() {
+    if (this.node.hrefTargetType) {
+      return this.node.hrefTargetType;
+    }
+    return CONSTANT.DEFAULT_HREF_TARGET_TYPE;
+  }
   hasItems(): boolean {
     return this.nodeChildren.length > 0 ? true : false;
   }
@@ -198,11 +204,7 @@ export class ListItemComponent implements OnChanges, OnInit {
       && node.link !== undefined
       && node.link
     ) {
-      if (node.externalRedirect !== undefined && node.externalRedirect) {
-        window.location.href = node.link;
-      } else {
-        this.router.navigate([node.link], node.navigationExtras);
-      }
+      this.router.navigate([node.link], node.navigationExtras);
     } else if (node.onSelected && typeof node.onSelected === 'function') {
       node.onSelected(node);
       this.selectedListItem(node);

src/app/app.module.ts

@@ -6,9 +6,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { MaterialsModule } from './modules/materials.module';
 import { AppRoutingModule } from './app-routing.module';
 
-// import { NgMaterialMultilevelMenuModule } from './../../projects/ng-material-multilevel-menu/src/lib/ng-material-multilevel-menu.module';
+import { NgMaterialMultilevelMenuModule } from './../../projects/ng-material-multilevel-menu/src/lib/ng-material-multilevel-menu.module';
 
-import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
+// import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
 
 import { AppComponent } from './app.component';
 

src/app/constants.ts

@@ -66,7 +66,8 @@ export const constant = {
             label: 'NPM',
             icon: 'info_outline',
             link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
-            externalRedirect: true
+            externalRedirect: true,
+            hrefTargetType: '_blank'
         }
     ],
     sidebarConfigurations: {