Скачать или смотреть How to Add a Blue Line Under the Current Tab in Angular's mat-tab-nav-bar

Learn how to implement a `border-bottom: blue;` style under the current tab in Angular's `mat-tab-nav-bar` using `routerLinkActive`.
---
This video is based on the question https://stackoverflow.com/q/64270411/ asked by the user 'canko' ( https://stackoverflow.com/u/13174695/ ) and on the answer https://stackoverflow.com/a/64281447/ provided by the user 'SETI At Home' ( https://stackoverflow.com/u/4080319/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: the function of the line under the current tab of "mat-group" in "mat-tab-nav-bar" (Angular)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Styling the Active Tab in Angular's mat-tab-nav-bar

In Angular development, the transition from using mat-group components to mat-tab-nav-bar can come with its own set of challenges. One common issue developers face is replicating the visual indicator — typically a colored line or border — that signifies the currently active tab. In this guide, we'll tackle how to add that distinctive blue line under the active tab, similar to what the mat-group provides.

The Problem: Missing Active Tab Indicator

When using the mat-tab-nav-bar, many developers notice the absence of a visual cue to indicate which tab is currently selected. Unlike the mat-group, where a blue line appears beneath the current tab, the mat-tab-nav-bar requires additional configuration to achieve the same effect.

To illustrate the issue, here is a simplified version of the code without the active tab indicator:

[[See Video to Reveal this Text or Code Snippet]]

In this code, clicking on any tab will change the view, but there is no visual feedback showing which tab is currently selected.

The Solution: Utilizing routerLinkActive

The key to adding the active tab styling lies in the routerLinkActive directive. This Angular feature allows us to set classes or styles to elements based on their router link's active state.

Step-by-Step Implementation

Add routerLinkActive to Each Link:
You need to implement routerLinkActive for each tab link to track whether they are active.

Use the # rla Template Variable:
This variable references each tab's active state, allowing you to apply styles conditionally.

Apply the Active Style:
Lastly, to achieve the blue line effect, use CSS to modify the active tab with a border-bottom.

Here's how your updated code should look:

[[See Video to Reveal this Text or Code Snippet]]

Adding CSS for the Active Tab

Next, you will need to add some CSS to create the visual cue for the active tab. You can achieve this by targeting the active tab link and applying the border-bottom property. Here's an example:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following the steps outlined above, you can easily replicate the blue line under the current tab in Angular's mat-tab-nav-bar. Utilizing the routerLinkActive directive not only gives your users a clear visual cue of their current location within the application but also enhances the overall user experience.

Now, you can switch tabs with confidence, knowing that your application will clearly indicate which section is active!