I want to customize my navigation links to resemble file folder tabs by dynamically adding and removing classes using Angular. When a link is active, it should not have a bottom border to indicate it as the primary tab. Here's a rough starting point:
https://i.sstatic.net/JwNcS.png
How can I correctly utilize [ngClass] to toggle classes for my links based on certain conditions?
Issue 1: What is the best way to implement a hover effect for the non-active links? I want them to change to a grey shade when hovered over.
Issue 2: How can I apply the 'active-link' class to one of the links by default, so that it appears active (without a bottom border) upon initial load?
This is what I have implemented so far-
my component.html:
<ul class="nav nav-tabs">
<li [ngClass]="{'active-link': id === 1 }" id="1"(click)="addClass(id=1)" ><a [routerLink]="['']" data-toggle="tab">All Sites</a></li>
<li [ngClass]="{'active-link': id === 2 }" id="2"(click)="addClass(id=2)"><a [routerLink]="['/sites/map']" data-toggle="tab">Sites Map</a></li>
</ul>
My component.css:
li {
display: inline;
font-size: 150%;
}
.active-link {
border-bottom: 1px solid black;
}
.nav li {
border-radius: 3px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
And in my .ts file
export class AppComponent {
addClass(id: any) {
this.id = id;
}
...
What modifications can I make to my code to set the 'active-link' class by default, and implement a hover effect for the non-active links in a clean manner?
Thank you! Feel free to ask if you need further clarification.