5

I want a better way to write these lines of code.

<li *ngIf="params.page > 1" class="page-item">
    <a class="page-link" [routerLink]="[]" [queryParams]="changePage(params,1)">First</a>
 </li>
<li *ngIf="!(params.page > 1)" class="page-item disabled">
     <a class="page-link">First</a>
</li>

I want to disable routerLink when !(params.page > 1). The class "disabled" is the easy way (ngClass). But the routerLink will be still active

The Hungry Dictator
  • 3,444
  • 5
  • 37
  • 53
Michalis
  • 6,686
  • 13
  • 52
  • 78
  • regarding `params` from your template, what is the source? Did you obtained them from the `ActivatedRoute#params.subscribe()` or from `ActivatedRoute#snapshot.params`? – andreim Apr 28 '17 at 06:59
  • Possible duplicate of [Angular 2, disable routerLink](https://stackoverflow.com/questions/35431188/angular-2-disable-routerlink) – Mx. Aug 14 '17 at 13:01

1 Answers1

4

Try something like this

<li class="page-item">
<a class="page-link" [class.disabled]="(params.page > 1) ? true : null" 
    [routerLink]="[]" [queryParams]="changePage(params,1)">First</a>
</li>

Edit

I missed this part. :D

You also need to add class 

 a.disabled {
     pointer-events: none;
     cursor:default;
 }

Try this and check whether it works or not.

The Hungry Dictator
  • 3,444
  • 5
  • 37
  • 53