How to remove and add class to Shared Component after navigate from one page to other?

Hello Guys , I have made a component which is used in various pages.
In this component I have made 5 custom tabs and navigating to page through routerLink , Now what I want is to add the tab-selected class to the active page. I have tried through Jquery and it works too but not perfectly, issue is that after switching from page one to other the page get refresh and tab-selected class get removed.

So can any one have the Idea how can I do this?

This is my component and below the code
Capture

HTML

<div class="tab-frame">
  <div class="tab-element ss-tabs tab-selected " (click)="tabselected('home')" id="home">
    <ion-icon src="assets/icon/home-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs " (click)="tabselected('search')" id="search">
    <ion-icon src="assets/icon/search-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" (click)="tabselected('cart')" id="cart">
    <ion-icon src="assets/icon/cart-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" (click)="tabselected('wishlist')" id="wishlist">
    <ion-icon src="assets/icon/heart-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" (click)="tabselected('myaccount')" id="myaccount">
    <ion-icon src="assets/icon/user-o.svg"></ion-icon>
  </div>
</div>

TS

tabselected(url) {
    this.router.navigateByUrl(url);
    $('.ss-tabs').removeClass('tab-selected');
    $('#' + url).addClass('tab-selected');
  }

The component is shared and used as

<app-footertab></app-footertab>

Please Help…
Thanks

Hi @FreakyMind,

First off all you should not use Jquery in an Angular App you should rather use Renderer although this is not recommend.

I suggest you to use RouterLink directive with RouterLinkActive directive.

<div class="tab-frame">
  <div class="tab-element ss-tabs" routerLink="/home" routerLinkActive="tab-selected" id="home">
    <ion-icon src="assets/icon/home-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" routerLink="/search" routerLinkActive="tab-selected" id="search">
    <ion-icon src="assets/icon/search-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" routerLink="/cart" routerLinkActive="tab-selected" id="cart">
    <ion-icon src="assets/icon/cart-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" routerLink="/wishlist" routerLinkActive="tab-selected" id="wishlist">
    <ion-icon src="assets/icon/heart-o.svg"></ion-icon>
  </div>
  <div class="tab-element ss-tabs" routerLink="/myaccount" routerLinkActive="tab-selected" 
 id="myaccount">
    <ion-icon src="assets/icon/user-o.svg"></ion-icon>
  </div>
</div>

You should already have it but dont forget to add the RouterModule in imports array.

1 Like

@GThireau1

Thanks a lot buddy . It Works perfectly :slight_smile:

I have searched a lot for the solution and tried many of the things but didn’t get success. You have solved my problem as this is required in many apps.

Actually I am new in Ionic design and I am learning . Sure I will not use Jquery in Angular Apps.

Thanks Once Again :slight_smile:

1 Like

@FreakyMind,

Glad to hear it, You’re welcome !

No problem we are all learning every day :slight_smile:

Have a nice day !

1 Like