purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added exactMatch parameter to the navigation items for correctly highlighting them

Browse Source
This commit is contained in:
Sercan Yemen 2017-11-04 13:39:18 +03:00
parent 99d9552813
commit 0fd8a75f7d
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
View File

@ -1,4 +1,5 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge"

3
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -1,4 +1,5 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge"

28
src/app/navigation.model.ts
View File

@ -45,28 +45,32 @@ export class NavigationModel
'url' : '/apps/e-commerce/dashboard'
},
{
'id' : 'dashboard',
'title': 'Products',
'id' : 'products',
'title' : 'Products',
'type' : 'item',
'url' : '/apps/e-commerce/products'
'url' : '/apps/e-commerce/products',
'exactMatch': true
},
{
'id' : 'dashboard',
'title': 'Product Detail',
'id' : 'productDetail',
'title' : 'Product Detail',
'type' : 'item',
'url' : '/apps/e-commerce/products/1/printed-dress'
'url' : '/apps/e-commerce/products/1/printed-dress',
'exactMatch': true
},
{
'id' : 'dashboard',
'title': 'Orders',
'id' : 'orders',
'title' : 'Orders',
'type' : 'item',
'url' : '/apps/e-commerce/orders'
'url' : '/apps/e-commerce/orders',
'exactMatch': true
},
{
'id' : 'dashboard',
'title': 'Order Detail',
'id' : 'orderDetail',
'title' : 'Order Detail',
'type' : 'item',
'url' : '/apps/e-commerce/orders/1'
'url' : '/apps/e-commerce/orders/1',
'exactMatch': true
}
]
},