How to apply Angular routerLinkActive for tab component that sharing same pathHow do I change Eclipse to use spaces instead of tabs?Eclipse HotKey: how to switch between tabs?@Directive v/s @Component in AngularAngular - Use pipes in services and componentsAngular dynamic tabs with user-click chosen componentswebpack html-loaders lowercase angular 2 built-in directivesrouterLinkActive in Angular 4 doesn't add class when only parameter changesAngular 2/4 - routerLinkActive not working properlyAngular routerLinkActive for multiple pathsangular RouterLinkActive not matching child paths
FD Battery Stations... How Do You Log?
Improve appearance of the table in Latex
How can I ping multiple IP addresses at the same time?
Too early in the morning to have SODA?
Why is it easier to balance a non-moving bike standing up than sitting down?
Counterfeit checks were created for my account. How does this type of fraud work?
macOS: How to take a picture from camera after 1 minute
How to remove stain from pavement after having dropped sulfuric acid on it?
Syntax and semantics of XDV commands (XeTeX)
Should I include an appendix for inessential, yet related worldbuilding to my story?
Should the party get XP for a monster they never attacked?
Is the continuity test limit resistance of a multimeter standard?
How can a warlock learn from a spellbook?
What mathematical theory is required for high frequency trading?
A word for delight at someone else's failure?
Why is oilcloth made with linseed oil?
Where should a runway for a spaceplane be located?
Mathematically modelling RC circuit with a linear input
Value matching with NA - missing values - using mutate
King or Queen-Which piece is which?
How much steel armor can you wear and still be able to swim?
Why don't countries like Japan just print more money?
Subtract the Folded Matrix
Did the CIA blow up a Siberian pipeline in 1982?
How to apply Angular routerLinkActive for tab component that sharing same path
How do I change Eclipse to use spaces instead of tabs?Eclipse HotKey: how to switch between tabs?@Directive v/s @Component in AngularAngular - Use pipes in services and componentsAngular dynamic tabs with user-click chosen componentswebpack html-loaders lowercase angular 2 built-in directivesrouterLinkActive in Angular 4 doesn't add class when only parameter changesAngular 2/4 - routerLinkActive not working properlyAngular routerLinkActive for multiple pathsangular RouterLinkActive not matching child paths
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I've created a page using angular material with sidebar and tab.
Im using angular 7.
Here is sample image ->
sample image:
When I navigate to content tab, is-active class no longer apply to selected group in sidebar (no highlight). it is sharing same path. Group should be highlighted when we navigate to content tab. I try few methods but I still can't acheive that.
Here is my code:
app.html
<mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
(group.groupName.length > 22) ? (group.groupName
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
routeLink.label
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>app.ts
export class UserGroupComponent implements OnInit
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog)
this.routeLinks = [
label: 'Overview',
link: './overview',
index: 0
,
label: 'Permissions',
link: './permission',
index: 1
];
ngOnInit()
get groups()
return this.userManagementService.groups;
app.routing.ts
const userManagementRoutes: Routes = [
path: '',
component: UserManagementComponent,
children: [
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
,
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
]
]
];
@NgModule(
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
)
export class UserManagementRoutingModule 
angular tabs angular-material routerlink routerlinkactive edited Mar 25 at 7:26
Abhishek Kumar
1,593418
asked Mar 25 at 6:58
SKLSKL
278518
|
show 2 more comments
0
I've created a page using angular material with sidebar and tab.
Im using angular 7.
Here is sample image ->
sample image:
When I navigate to content tab, is-active class no longer apply to selected group in sidebar (no highlight). it is sharing same path. Group should be highlighted when we navigate to content tab. I try few methods but I still can't acheive that.
Here is my code:
app.html
<mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
(group.groupName.length > 22) ? (group.groupName
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
routeLink.label
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>app.ts
export class UserGroupComponent implements OnInit
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog)
this.routeLinks = [
label: 'Overview',
link: './overview',
index: 0
,
label: 'Permissions',
link: './permission',
index: 1
];
ngOnInit()
get groups()
return this.userManagementService.groups;
app.routing.ts
const userManagementRoutes: Routes = [
path: '',
component: UserManagementComponent,
children: [
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
,
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
]
]
];
@NgModule(
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
)
export class UserManagementRoutingModule edited Mar 25 at 7:26
Abhishek Kumar
1,593418
asked Mar 25 at 6:58
SKLSKL
278518
Can you please create a small demo over stackblitz ?, it will be easy to debug the problem.
– Abhishek Kumar
Mar 25 at 7:18
@AbhishekKumar im facing some issue while creating stackblitz. here is code: stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn
– SKL
Mar 25 at 9:17
[routerLinkActive]="['is-active']"will be true for groups for a particular url, and i think as you are using tab bar withnav-links, so the url is changing andis-activefrom groups option is deselected. Is this happening ?? or in both case url is same.
– Abhishek Kumar
Mar 25 at 9:38
Yes correct. When first time page load this urlgroup/Dynamic_Code/overviewbeing called for the content tabgroup//Dynamic_Code/content
– SKL
Mar 25 at 10:39
should i post it as answer ? or its okay for the other users looking for the answer.
– Abhishek Kumar
Mar 25 at 10:43
|
show 2 more comments
0
0
0
I've created a page using angular material with sidebar and tab.
Im using angular 7.
Here is sample image ->
sample image:
When I navigate to content tab, is-active class no longer apply to selected group in sidebar (no highlight). it is sharing same path. Group should be highlighted when we navigate to content tab. I try few methods but I still can't acheive that.
Here is my code:
app.html
<mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
(group.groupName.length > 22) ? (group.groupName
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
routeLink.label
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>app.ts
export class UserGroupComponent implements OnInit
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog)
this.routeLinks = [
label: 'Overview',
link: './overview',
index: 0
,
label: 'Permissions',
link: './permission',
index: 1
];
ngOnInit()
get groups()
return this.userManagementService.groups;
app.routing.ts
const userManagementRoutes: Routes = [
path: '',
component: UserManagementComponent,
children: [
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
,
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
]
]
];
@NgModule(
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
)
export class UserManagementRoutingModule edited Mar 25 at 7:26
Abhishek Kumar
1,593418
asked Mar 25 at 6:58
SKLSKL
278518
I've created a page using angular material with sidebar and tab.
Im using angular 7.
Here is sample image ->
sample image:
When I navigate to content tab, is-active class no longer apply to selected group in sidebar (no highlight). it is sharing same path. Group should be highlighted when we navigate to content tab. I try few methods but I still can't acheive that.
Here is my code:
app.html
<mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
(group.groupName.length > 22) ? (group.groupName
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
routeLink.label
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>app.ts
export class UserGroupComponent implements OnInit
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog)
this.routeLinks = [
label: 'Overview',
link: './overview',
index: 0
,
label: 'Permissions',
link: './permission',
index: 1
];
ngOnInit()
get groups()
return this.userManagementService.groups;
app.routing.ts
const userManagementRoutes: Routes = [
path: '',
component: UserManagementComponent,
children: [
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
,
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
]
]
];
@NgModule(
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
)
export class UserManagementRoutingModule <mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
(group.groupName.length > 22) ? (group.groupName
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
routeLink.label
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container><mat-sidenav-container class="user-group-container">
<mat-sidenav class="group-sidenav" mode="side" opened>
<h3 matSubheader class="menu-sidenav-header">Groups</h3>
<mat-list class="menu-list-sidenav" role="list">
<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
<div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
(group.groupName.length > 22) ? (group.groupName
</div>
</mat-list-item>
</mat-list>
<div class="add-group-section" (click)="openCreateGroupModal()">
<mat-icon mat-list-icon>add</mat-icon>
<div class="add-group-btn">Add New Group</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
routeLink.label
</a>
</nav>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>export class UserGroupComponent implements OnInit
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog)
this.routeLinks = [
label: 'Overview',
link: './overview',
index: 0
,
label: 'Permissions',
link: './permission',
index: 1
];
ngOnInit()
get groups()
return this.userManagementService.groups;
export class UserGroupComponent implements OnInit
routeLinks: any[];
activeLinkIndex = -1;
constructor(private userManagementService: UserManagementService,
public dialog: MatDialog)
this.routeLinks = [
label: 'Overview',
link: './overview',
index: 0
,
label: 'Permissions',
link: './permission',
index: 1
];
ngOnInit()
get groups()
return this.userManagementService.groups;
const userManagementRoutes: Routes = [
path: '',
component: UserManagementComponent,
children: [
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
,
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
]
]
];
@NgModule(
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
)
export class UserManagementRoutingModule const userManagementRoutes: Routes = [
path: '',
component: UserManagementComponent,
children: [
path: 'group/:groupCode',
component: UserGroupComponent,
canActivate: [AuthGuard],
children: [
path: 'permission',
component: UserPermissionComponent,
canActivate: [AuthGuard]
,
path: 'overview',
component: UserGroupOverviewComponent,
canActivate: [AuthGuard]
]
]
];
@NgModule(
imports: [
RouterModule.forChild(userManagementRoutes)
],
exports: [RouterModule]
)
export class UserManagementRoutingModule edited Mar 25 at 7:26
Abhishek Kumar
1,593418
asked Mar 25 at 6:58
SKLSKL
278518
edited Mar 25 at 7:26
Abhishek Kumar
1,593418
asked Mar 25 at 6:58
SKLSKL
278518
edited Mar 25 at 7:26
Abhishek Kumar
1,593418
edited Mar 25 at 7:26
Abhishek Kumar
1,593418
edited Mar 25 at 7:26
Abhishek Kumar
1,593418
1,593418
asked Mar 25 at 6:58
SKLSKL
278518
asked Mar 25 at 6:58
SKLSKL
278518
asked Mar 25 at 6:58
SKLSKL
278518
278518
Can you please create a small demo over stackblitz ?, it will be easy to debug the problem.
– Abhishek Kumar
Mar 25 at 7:18
@AbhishekKumar im facing some issue while creating stackblitz. here is code: stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn
– SKL
Mar 25 at 9:17
[routerLinkActive]="['is-active']"will be true for groups for a particular url, and i think as you are using tab bar withnav-links, so the url is changing andis-activefrom groups option is deselected. Is this happening ?? or in both case url is same.
– Abhishek Kumar
Mar 25 at 9:38
Yes correct. When first time page load this urlgroup/Dynamic_Code/overviewbeing called for the content tabgroup//Dynamic_Code/content
– SKL
Mar 25 at 10:39
should i post it as answer ? or its okay for the other users looking for the answer.
– Abhishek Kumar
Mar 25 at 10:43
|
show 2 more comments
Can you please create a small demo over stackblitz ?, it will be easy to debug the problem.
– Abhishek Kumar
Mar 25 at 7:18
@AbhishekKumar im facing some issue while creating stackblitz. here is code: stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn
– SKL
Mar 25 at 9:17
[routerLinkActive]="['is-active']"will be true for groups for a particular url, and i think as you are using tab bar withnav-links, so the url is changing andis-activefrom groups option is deselected. Is this happening ?? or in both case url is same.
– Abhishek Kumar
Mar 25 at 9:38
Yes correct. When first time page load this urlgroup/Dynamic_Code/overviewbeing called for the content tabgroup//Dynamic_Code/content
– SKL
Mar 25 at 10:39
should i post it as answer ? or its okay for the other users looking for the answer.
– Abhishek Kumar
Mar 25 at 10:43
Can you please create a small demo over stackblitz ?, it will be easy to debug the problem.
– Abhishek Kumar
Mar 25 at 7:18
Can you please create a small demo over stackblitz ?, it will be easy to debug the problem.
– Abhishek Kumar
Mar 25 at 7:18
@AbhishekKumar im facing some issue while creating stackblitz. here is code: stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn
– SKL
Mar 25 at 9:17
@AbhishekKumar im facing some issue while creating stackblitz. here is code: stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn
– SKL
Mar 25 at 9:17
[routerLinkActive]="['is-active']" will be true for groups for a particular url, and i think as you are using tab bar with nav-links, so the url is changing and is-active from groups option is deselected. Is this happening ?? or in both case url is same.– Abhishek Kumar
Mar 25 at 9:38
[routerLinkActive]="['is-active']" will be true for groups for a particular url, and i think as you are using tab bar with nav-links, so the url is changing and is-active from groups option is deselected. Is this happening ?? or in both case url is same.– Abhishek Kumar
Mar 25 at 9:38
Yes correct. When first time page load this url
group/Dynamic_Code/overview being called for the content tab group//Dynamic_Code/content– SKL
Mar 25 at 10:39
Yes correct. When first time page load this url
group/Dynamic_Code/overview being called for the content tab group//Dynamic_Code/content– SKL
Mar 25 at 10:39
should i post it as answer ? or its okay for the other users looking for the answer.
– Abhishek Kumar
Mar 25 at 10:43
should i post it as answer ? or its okay for the other users looking for the answer.
– Abhishek Kumar
Mar 25 at 10:43
|
show 2 more comments
1 Answer
1
active
oldest
votes
0
I solved this with ngClass. I removed [routerLinkActive]="['is-active']" and simply add ngClass condition as below.
<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div>answered Mar 25 at 15:10
SKLSKL
278518
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55332620%2fhow-to-apply-angular-routerlinkactive-for-tab-component-that-sharing-same-path%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I solved this with ngClass. I removed [routerLinkActive]="['is-active']" and simply add ngClass condition as below.
<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div>answered Mar 25 at 15:10
SKLSKL
278518
add a comment |
0
I solved this with ngClass. I removed [routerLinkActive]="['is-active']" and simply add ngClass condition as below.
<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div>answered Mar 25 at 15:10
SKLSKL
278518
add a comment |
0
0
0
I solved this with ngClass. I removed [routerLinkActive]="['is-active']" and simply add ngClass condition as below.
<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div>answered Mar 25 at 15:10
SKLSKL
278518
I solved this with ngClass. I removed [routerLinkActive]="['is-active']" and simply add ngClass condition as below.
<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div><div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div><div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
(group.groupName.length > 22) ? (group.groupName
</div>answered Mar 25 at 15:10
SKLSKL
278518
answered Mar 25 at 15:10
SKLSKL
278518
answered Mar 25 at 15:10
SKLSKL
278518
answered Mar 25 at 15:10
SKLSKL
278518
278518
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55332620%2fhow-to-apply-angular-routerlinkactive-for-tab-component-that-sharing-same-path%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please create a small demo over stackblitz ?, it will be easy to debug the problem.
– Abhishek Kumar
Mar 25 at 7:18
@AbhishekKumar im facing some issue while creating stackblitz. here is code: stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn
– SKL
Mar 25 at 9:17
[routerLinkActive]="['is-active']"will be true for groups for a particular url, and i think as you are using tab bar withnav-links, so the url is changing andis-activefrom groups option is deselected. Is this happening ?? or in both case url is same.– Abhishek Kumar
Mar 25 at 9:38
Yes correct. When first time page load this url
group/Dynamic_Code/overviewbeing called for the content tabgroup//Dynamic_Code/content– SKL
Mar 25 at 10:39
should i post it as answer ? or its okay for the other users looking for the answer.
– Abhishek Kumar
Mar 25 at 10:43