how to make the tab active on click of that using angular2

Question

I have 4 tabs, on click of each tab, if it is active then it is highlighted. But to one tab i had used (click) event, so i am unable to make that tab active. So can anyone help me how can i make that active on click of that function.

HTML:

<a  id="AminManage" class="list-group-item justify-content-between" (click)="patientinfo()"  routerLinkActive="active">
  <span>
    <i class="icon-home"></i>Patient Information</span>
</a>

I also used [routerLink]="['/admin/patient-info/', Cookie.get('AdminPatientId')]" but didnt work.

Here this is not supporting routerLinkActive="active" so is there anyway to make it work. Please help.

Ts:

patientinfo(){
    this.router.navigate(['/admin/patient-info', Cookie.get('AdminPatientId')])
  }

here in id, i am passing cookie.get value, i used this but didnt work [routerLink]="['/admin/patient-info/', Cookie.get('AdminPatientId')]" — Bhrungarajni, Jun 28 '18 at 11:00
what was the error? it's the recommend way how you should use the routerLink — codeteq, Jun 28 '18 at 11:08
ERROR TypeError: Cannot read property 'get' of undefined, this is the error i get — Bhrungarajni, Jun 28 '18 at 11:09
the expression Cookie.get... is not evaluated within the HTML. You could add {{}} or use a direct binding - see my answer. — codeteq, Jun 28 '18 at 11:19

score 0 · Answer 1 · answered Jun 28 '18 at 11:00

0

Inside the patientinfo() function, you can write the logic to add routerLinkActive="active" on the anchor tag.

I hope this will help you.

answered Jun 28 '18 at 11:00

Abhishek Sharma

360
1
10

how to write? please help – Bhrungarajni Jun 28 '18 at 11:00
A
or element will look as follows after routerlinkactive is added to it:-

Either you can add all the needed things mentioned in the above html or you can add only a class="active" and your element will be highlighted. All the best.

Abhishek Sharma

Jun 28 '18 at 11:18

hai thanks for response, but here if i add active class, then it will be highlighted all time, but i want that to get highlighted only when i click on that tab – Bhrungarajni Jun 29 '18 at 08:29

You needn't to write class="active" statically on HTML, instead you will write a logic inside the patientinfo() function to add class to anchor tag, after the anchor has been clicked. – Abhishek Sharma Jun 29 '18 at 09:41

can you please show how? should i write inside this? patientinfo() – Bhrungarajni Jun 29 '18 at 10:43

check this please https://stackoverflow.com/questions/42809368/angular-2-adding-a-class-to-a-dom-element-when-clicked – Abhishek Sharma Jun 29 '18 at 17:01

codeteq · Answer 2 · 2018-06-28T11:40:56.740

Just bind the patientId directly:

If the expression Cookie.get... is not evaluated within the HTML. You could add {{}} or use a direct binding

HTML:

<a id="AminManage" class="list-group-item justify-content-between" 
   [routerLink]="[patientInfoRoute,getPatientIdFromCookie()]" />
   <span>
      <i class="icon-home"></i>Patient Information
   </span>
</a>

TS:

    private getPatientIdFromCookie() {
      return Cookie.get('AdminPatientId');
    }
    public patientInfoRoute = "/admin/patient-info/"

OR use an approach with isActive:

HTML:

<a id="AminManage" class="list-group-item justify-content-between"  [class.active]="isActive([patientInfoRoute, getPatientIdFromCookie()]) />
   <span>
      <i class="icon-home"></i>Patient Information
   </span>
</a>

TS:

import {Router} from '@angular/router';

private getPatientIdFromCookie() {
  return Cookie.get('AdminPatientId');
}
public patientInfoRoute = "/admin/patient-info/"

isActive(instruction: any[]): boolean {
  // Set the second parameter to true if you want to require an exact match.
  return this.router.isActive(this.router.createUrlTree(instruction), false);
} 

patientinfo(){
  this.router.navigate([patientInfoRoute,getPatientIdFromCookie()])   
}

no even this wont work, because here cookie value will get updated after refresh or after 2nd click — Bhrungarajni, Jun 28 '18 at 11:22
So you don't know the patientId already when the site is loaded? Can you please test the code with a fixed patientId to be sure the approach works at least. Maybe the cookie thing is misused in your case? — codeteq, Jun 28 '18 at 11:26
here, if i declare instance globally and try to fetch iD then the error exists, but if i directly take cookie in click event it works — Bhrungarajni, Jun 28 '18 at 11:29

how to make the tab active on click of that using angular2

2 Answers2