How to highlight same page number for two different URLs in angular 2 using routerLink

Question

I have pagination like below. I would like to highlight page number 2 for both the below links.

[routerLink]="['/link/sublink2']
[routerLink]="['/link/sublink22']

How to achieve this using angular 2.

<ul class="pagination pagination-plain">

      <li [routerLinkActive]="['active']">
        <a [routerLink]="['/link/sublink1']">1</a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="['/link/sublink2']">2</a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="['/link/sublink3']">3</a>
      </li>
</ul> 

Answer 1

In your html,

<li [class]="addActiveClass()" >
   <a [routerLink]="['/link/sublink2', '/link/sublink22']">2</a>
</li>

and in your component.ts file,

private addActiveClass() {
    let fullpath:any[]=this.router.url.split("/")
    if(fullpath[2] == 'sublink2' || fullpath[2] == 'sublink22'){ /* fullpath[2] has the second parameter after the '/'. If you want first parameter after the slash, use fullpath[1] */
      return 'active';
    }else{
      return '';
    }
  }

This adds an active class to the li when you route to the page. You can highlight the li.active using css.