How to style routerLink DOM element based on guard response
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am wondering if there is a native angular directive that works like routerLinkActive but checks wether the route can activate based on its assigned guard.
To clarify say I have the following route defined:
{
path: '1', component: RouteOneComponent,
canActivate: [RouteOneGuard]
}
And some HTML that looks like this:
<p [routerLink]="['1']" routerLinkActive="active">The Link</p>
Is there a directive that I can use to apply an 'enabled' css class when RouteOneGuard returns true? Something like:
<p [routerLink]="['1']" routerLinkActive="active" canActivate="enabled">The Link</p>
Or do I have to create a custom directive for this?
angular edited Jan 3 at 21:54
ODYN-Kon
2,7233926
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
add a comment |
I am wondering if there is a native angular directive that works like routerLinkActive but checks wether the route can activate based on its assigned guard.
To clarify say I have the following route defined:
{
path: '1', component: RouteOneComponent,
canActivate: [RouteOneGuard]
}
And some HTML that looks like this:
<p [routerLink]="['1']" routerLinkActive="active">The Link</p>
Is there a directive that I can use to apply an 'enabled' css class when RouteOneGuard returns true? Something like:
<p [routerLink]="['1']" routerLinkActive="active" canActivate="enabled">The Link</p>
Or do I have to create a custom directive for this?
angular edited Jan 3 at 21:54
ODYN-Kon
2,7233926
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
add a comment |
I am wondering if there is a native angular directive that works like routerLinkActive but checks wether the route can activate based on its assigned guard.
To clarify say I have the following route defined:
{
path: '1', component: RouteOneComponent,
canActivate: [RouteOneGuard]
}
And some HTML that looks like this:
<p [routerLink]="['1']" routerLinkActive="active">The Link</p>
Is there a directive that I can use to apply an 'enabled' css class when RouteOneGuard returns true? Something like:
<p [routerLink]="['1']" routerLinkActive="active" canActivate="enabled">The Link</p>
Or do I have to create a custom directive for this?
angular edited Jan 3 at 21:54
ODYN-Kon
2,7233926
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
I am wondering if there is a native angular directive that works like routerLinkActive but checks wether the route can activate based on its assigned guard.
To clarify say I have the following route defined:
{
path: '1', component: RouteOneComponent,
canActivate: [RouteOneGuard]
}
And some HTML that looks like this:
<p [routerLink]="['1']" routerLinkActive="active">The Link</p>
Is there a directive that I can use to apply an 'enabled' css class when RouteOneGuard returns true? Something like:
<p [routerLink]="['1']" routerLinkActive="active" canActivate="enabled">The Link</p>
Or do I have to create a custom directive for this?
angular angular edited Jan 3 at 21:54
ODYN-Kon
2,7233926
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
edited Jan 3 at 21:54
ODYN-Kon
2,7233926
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
edited Jan 3 at 21:54
ODYN-Kon
2,7233926
edited Jan 3 at 21:54
ODYN-Kon
2,7233926
edited Jan 3 at 21:54
ODYN-Kon
2,7233926
2,7233926
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
asked Jan 3 at 21:45
Ashtin RamirezAshtin Ramirez
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Template:
<a
[routerLink]="['1']"
routerLinkActive="active"
[ngClass]="{'link-disabled': isNotAllowed}">
The Link
</a>
Component
get isNotAllowed(): boolean {
return this.permissionService.isUserHasSomePermission(); // or canActivate method used in routes
}
Styles
.link-disabled {
pointer-events: none;
opacity: 0.5;
}
answered Jan 3 at 21:59
m.kochm.koch
1042
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
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
});
}
});
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%2f54030238%2fhow-to-style-routerlink-dom-element-based-on-guard-response%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
Template:
<a
[routerLink]="['1']"
routerLinkActive="active"
[ngClass]="{'link-disabled': isNotAllowed}">
The Link
</a>
Component
get isNotAllowed(): boolean {
return this.permissionService.isUserHasSomePermission(); // or canActivate method used in routes
}
Styles
.link-disabled {
pointer-events: none;
opacity: 0.5;
}
answered Jan 3 at 21:59
m.kochm.koch
1042
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
add a comment |
Template:
<a
[routerLink]="['1']"
routerLinkActive="active"
[ngClass]="{'link-disabled': isNotAllowed}">
The Link
</a>
Component
get isNotAllowed(): boolean {
return this.permissionService.isUserHasSomePermission(); // or canActivate method used in routes
}
Styles
.link-disabled {
pointer-events: none;
opacity: 0.5;
}
answered Jan 3 at 21:59
m.kochm.koch
1042
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
add a comment |
Template:
<a
[routerLink]="['1']"
routerLinkActive="active"
[ngClass]="{'link-disabled': isNotAllowed}">
The Link
</a>
Component
get isNotAllowed(): boolean {
return this.permissionService.isUserHasSomePermission(); // or canActivate method used in routes
}
Styles
.link-disabled {
pointer-events: none;
opacity: 0.5;
}
answered Jan 3 at 21:59
m.kochm.koch
1042
Template:
<a
[routerLink]="['1']"
routerLinkActive="active"
[ngClass]="{'link-disabled': isNotAllowed}">
The Link
</a>
Component
get isNotAllowed(): boolean {
return this.permissionService.isUserHasSomePermission(); // or canActivate method used in routes
}
Styles
.link-disabled {
pointer-events: none;
opacity: 0.5;
}
answered Jan 3 at 21:59
m.kochm.koch
1042
answered Jan 3 at 21:59
m.kochm.koch
1042
answered Jan 3 at 21:59
m.kochm.koch
1042
answered Jan 3 at 21:59
m.kochm.koch
1042
1042
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
add a comment |
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
Thanks for the response :) To clarify, I am aware that ngClass can be used with a standard boolean from the controller to apply a class to the DOM element. I'm specifically wondering if there is something that works like routerLinkActive. The built in Angular directive routerLinkActive automatically checks the routerLink that is assigned to the DOM element against the current route you are on to apply a class to that DOM element. I am looking for something like this but instead of checking the current route, it checks the state of the route's canActivate property.
– Ashtin Ramirez
Jan 3 at 22:22
add a comment |
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.
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%2f54030238%2fhow-to-style-routerlink-dom-element-based-on-guard-response%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
