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
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