0

I am looking to create nav links that look like file folder tabs by adding and removing class with angular. When a link is active, it will not have a bottom border so it appears to be the primary tab. Here's a rough beginning:

enter image description here

How can I correctly use [ngClass] to add and remove classes to my links given these questions?

Problem 1: how to implement a hover directive? I want the non-active link to shade grey when hovered over

Problem 2: How to add the 'active-link' class to one of them by default, so that on initial load it appears active (no bottom border)

What I have 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 for my .ts file

export class AppComponent { 
  addClass(id: any) {
  this.id = id;
}
...

What can I change/add to my code to cleanly add the 'active-link' by default, as well as a hover directive for the non-active link?

Thanks! Let me know if I can clarify

Devstar34
  • 1,027
  • 2
  • 21
  • 47

1 Answers1

2

You can have a property like selectedTab which is what i'm guessing id is doing here. Just have all tabs have the unselected/inactive class and apply the active class only if the selectedTab/id is equal to that tabs id, you don't need ngClass if you don't want it you can write [class.active-link]="id === 1" where one is that links id. Set the variable id to your default tab in ngOnInit (or in the constructor or default in the class). If I'm missing something here let me know.

As for your hover issue, How can I add a class to an element on hover?

.ts file:

export class AppComponent {
  selectedTab = 0;

  constructor() {}
  // Function to select a tab.
  selectTab(tabId: number) {
    this.selectedTab = tabId;
  }
}

.html file:

<ul class="nav nav-tabs">
 <li [class.active-link]="selectedTab === 0" (click)="selectTab(0)"><a data-toggle="tab">All Sites</a></li>
 <li [class.active-link]="selectedTab === 1" (click)="selectTab(1)"><a data-toggle="tab">All Sites</a></li>
</ul>
Zachscs
  • 3,353
  • 7
  • 27
  • 52
  • I'm sorry I'mm having a little trouble interpreting, do I need to keep id if I use 'selectedTab'? Would you mind specifying how I write that in my .ts file? Thanks – Devstar34 Aug 21 '18 at 22:30
  • 1
    sure there's some code. And no you need only `selectedTab` OR `id` I just think `selectedTab` is more descriptive than `id` (I imagine id would be used in several places throughout the component/application). – Zachscs Aug 21 '18 at 22:37
  • 1
    I see, I wasn't sure if I'd need to use that id elsewhere. Very helpful thank you! – Devstar34 Aug 21 '18 at 22:39