How can I underline the active link in my side nav bar? Using material design in angular app

<div class="mt-3">

  <mat-nav-list>



      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          SERVICE

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          BILLING

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          OIL TICKETS

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          MY TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          APPROVE TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          EMPLOYEE LIST

        </a>

snippet of my html navigation page I just want to underline the active link but not quite sure how to do that within an angular app using material design. Also if there is a way to collapse it I would like to know that too. Thank you.

asked Nov 12 at 15:44

23908938

176

What's (click)='paycard.html' ?
– selem mn
Nov 12 at 15:46

its just there for now I am eventually going to change to where it redirects to
– 23908938
Nov 12 at 15:48

it is only there for a placeholder at the moment
– 23908938
Nov 12 at 15:48

You can use router for navigation angular.io/guide/router and routerLinkActive="active"(for e.g.) in HTML and class active in your css
– Smollet777
Nov 12 at 15:52

add a comment |

<div class="mt-3">

  <mat-nav-list>



      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          SERVICE

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          BILLING

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          OIL TICKETS

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          MY TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          APPROVE TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          EMPLOYEE LIST

        </a>

asked Nov 12 at 15:44

23908938

176

What's (click)='paycard.html' ?
– selem mn
Nov 12 at 15:46

its just there for now I am eventually going to change to where it redirects to
– 23908938
Nov 12 at 15:48

it is only there for a placeholder at the moment
– 23908938
Nov 12 at 15:48

You can use router for navigation angular.io/guide/router and routerLinkActive="active"(for e.g.) in HTML and class active in your css
– Smollet777
Nov 12 at 15:52

add a comment |

<div class="mt-3">

  <mat-nav-list>



      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          SERVICE

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          BILLING

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          OIL TICKETS

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          MY TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          APPROVE TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          EMPLOYEE LIST

        </a>

asked Nov 12 at 15:44

23908938

176

<div class="mt-3">

  <mat-nav-list>



      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          SERVICE

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          BILLING

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          OIL TICKETS

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          MY TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          APPROVE TIME

        </a>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>

          EMPLOYEE LIST

        </a>

html css angular

asked Nov 12 at 15:44

23908938

176

asked Nov 12 at 15:44

23908938

176

asked Nov 12 at 15:44

23908938

176

asked Nov 12 at 15:44

23908938

176

asked Nov 12 at 15:44

23908938

176

What's (click)='paycard.html' ?
– selem mn
Nov 12 at 15:46

its just there for now I am eventually going to change to where it redirects to
– 23908938
Nov 12 at 15:48

it is only there for a placeholder at the moment
– 23908938
Nov 12 at 15:48

You can use router for navigation angular.io/guide/router and routerLinkActive="active"(for e.g.) in HTML and class active in your css
– Smollet777
Nov 12 at 15:52

add a comment |

What's (click)='paycard.html' ?
– selem mn
Nov 12 at 15:46

its just there for now I am eventually going to change to where it redirects to
– 23908938
Nov 12 at 15:48

it is only there for a placeholder at the moment
– 23908938
Nov 12 at 15:48

You can use router for navigation angular.io/guide/router and routerLinkActive="active"(for e.g.) in HTML and class active in your css
– Smollet777
Nov 12 at 15:52

What's (click)='paycard.html' ?
– selem mn
Nov 12 at 15:46

its just there for now I am eventually going to change to where it redirects to
– 23908938
Nov 12 at 15:48

it is only there for a placeholder at the moment
– 23908938
Nov 12 at 15:48

You can use router for navigation angular.io/guide/router and routerLinkActive="active"(for e.g.) in HTML and class active in your css
– Smollet777
Nov 12 at 15:52

add a comment |

2 Answers
2

active

oldest

votes

As found in the Angular Routing and Navigation documentation, you use the routerLinkActive directive.

<mat-nav-list>

   <a mat-list-item 

        routerLink="/paycard"

        routerLinkActive="active_route"> Paycard </a>

</mat-nav-list>

This will add the .active_route class to your active route. Then you can style it as you'd like:

.active_route {

  text-decoration: underline;

}

If you have similar links, you may need to use {pathMatch: full} in the router link options (eg if you have routes "/pay" and "/pay/card".)

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

thank you thank you! exactly what I needed
– 23908938
Nov 12 at 15:58

add a comment |

If you do the routing in the tag you can add the routerLinkActiveattribute to apply a css class when the route is active.

In you case the would look something like this:

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'

 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

For more information have a look here

answered Nov 12 at 15:51

mika

23714

thank you!! I will check it out!
– 23908938
Nov 12 at 15:58

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265530%2fhow-can-i-underline-the-active-link-in-my-side-nav-bar-using-material-design-in%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

As found in the Angular Routing and Navigation documentation, you use the routerLinkActive directive.

<mat-nav-list>

   <a mat-list-item 

        routerLink="/paycard"

        routerLinkActive="active_route"> Paycard </a>

</mat-nav-list>

This will add the .active_route class to your active route. Then you can style it as you'd like:

.active_route {

  text-decoration: underline;

}

If you have similar links, you may need to use {pathMatch: full} in the router link options (eg if you have routes "/pay" and "/pay/card".)

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

thank you thank you! exactly what I needed
– 23908938
Nov 12 at 15:58

add a comment |

As found in the Angular Routing and Navigation documentation, you use the routerLinkActive directive.

<mat-nav-list>

   <a mat-list-item 

        routerLink="/paycard"

        routerLinkActive="active_route"> Paycard </a>

</mat-nav-list>

This will add the .active_route class to your active route. Then you can style it as you'd like:

.active_route {

  text-decoration: underline;

}

If you have similar links, you may need to use {pathMatch: full} in the router link options (eg if you have routes "/pay" and "/pay/card".)

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

thank you thank you! exactly what I needed
– 23908938
Nov 12 at 15:58

add a comment |

As found in the Angular Routing and Navigation documentation, you use the routerLinkActive directive.

<mat-nav-list>

   <a mat-list-item 

        routerLink="/paycard"

        routerLinkActive="active_route"> Paycard </a>

</mat-nav-list>

This will add the .active_route class to your active route. Then you can style it as you'd like:

.active_route {

  text-decoration: underline;

}

If you have similar links, you may need to use {pathMatch: full} in the router link options (eg if you have routes "/pay" and "/pay/card".)

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

As found in the Angular Routing and Navigation documentation, you use the routerLinkActive directive.

<mat-nav-list>

   <a mat-list-item 

        routerLink="/paycard"

        routerLinkActive="active_route"> Paycard </a>

</mat-nav-list>

This will add the .active_route class to your active route. Then you can style it as you'd like:

.active_route {

  text-decoration: underline;

}

If you have similar links, you may need to use {pathMatch: full} in the router link options (eg if you have routes "/pay" and "/pay/card".)

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

answered Nov 12 at 15:54

Roddy of the Frozen Peas

7,04582658

thank you thank you! exactly what I needed
– 23908938
Nov 12 at 15:58

add a comment |

thank you thank you! exactly what I needed
– 23908938
Nov 12 at 15:58

thank you thank you! exactly what I needed
– 23908938
Nov 12 at 15:58

add a comment |

If you do the routing in the tag you can add the routerLinkActiveattribute to apply a css class when the route is active.

In you case the would look something like this:

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'

 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

For more information have a look here

answered Nov 12 at 15:51

mika

23714

thank you!! I will check it out!
– 23908938
Nov 12 at 15:58

add a comment |

If you do the routing in the tag you can add the routerLinkActiveattribute to apply a css class when the route is active.

In you case the would look something like this:

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'

 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

For more information have a look here

answered Nov 12 at 15:51

mika

23714

thank you!! I will check it out!
– 23908938
Nov 12 at 15:58

add a comment |

If you do the routing in the tag you can add the routerLinkActiveattribute to apply a css class when the route is active.

In you case the would look something like this:

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'

 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

For more information have a look here

answered Nov 12 at 15:51

mika

23714

If you do the routing in the tag you can add the routerLinkActiveattribute to apply a css class when the route is active.

In you case the would look something like this:

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'

 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

For more information have a look here

answered Nov 12 at 15:51

mika

23714

answered Nov 12 at 15:51

mika

23714

answered Nov 12 at 15:51

mika

23714

answered Nov 12 at 15:51

mika

23714

thank you!! I will check it out!
– 23908938
Nov 12 at 15:58

add a comment |

thank you!! I will check it out!
– 23908938
Nov 12 at 15:58

thank you!! I will check it out!
– 23908938
Nov 12 at 15:58

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky