Angular 2 getting object object while Class binding

Question

I, am trying to bind the class in the pagination with the following code.

<ul class="pagination hidden-xs pull-right">
   <li *ngFor="let pagItem of _pagination">
       <a style="cursor: pointer;"
           (click)="paginationClick($event)"
           id="{{pagItem.pageNo}}"
           [ngClass]="{'active': pagItem.pageNo === currentPage}">
           {{pagItem.pageNo}}
       </a>
   </li>
</ul>

In the comparison I am getting object object

Here is the response from the api

The Page and Id is bind successfully. However I am getting the object object on class binding

Here is the image

Answer 1

This is only because you use an Array at

[ngClass]="{'active': pagItem.pageNo === currentPage}"

However your code should works.

this has to be used when you have many possible class result like this :

[ngClass]="{'active': pagItem.pageNo === currentPage, 'inactive': pagItem.pageNo !== currentPage}"

You could also do this to avoid the [Object, Object] rendering,

[class.active]="pagItem.pageNo === currentPage"

Be sure that your variable currentPage is set in your component and shared the same type.

Answer 2

Try this and ensure pagItem.pageNo and currentPage are the same type.

    <ul class="pagination hidden-xs pull-right">
    <li *ngFor="let pagItem of _pagination">
        <a style="cursor: pointer;"
            (click)="paginationClick($event)"
            id="{{pagItem.pageNo}}"
            [class.active]="pagItem.pageNo === currentPage">
            {{pagItem.pageNo}}
       </a>
   </li>
</ul>

Answer 3

I had the same issue and [ngClass] didn't work. Then I changed to different syntax and it solved the problem. [class.your-css-class]="yourVariable"