disable next button from paginator in primeng p-table

Question

I would like to disable next button from the paginator of p-table if a boolean is false..

Here is my p-table:

<p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
         [paginator]="paginator" [pageLinks]="1" ...

You can see my css code in order to disable the button:

::ng-deep 
     .ui-paginator-next {
        visibility: hidden;
    }

How to enable the css code only if my boolean is true, I want to use ngClass in p-table tag but it won't affect the paginator

Answer 1

Add a class to the table, like you said, using ngClass or like this:

[class.hide-next]="hideNext"

In your CSS ruleset, add this class to your selector, like this:

:host ::ng-deep {
    .hide-next .ui-paginator-next {
        visibility: hidden;
    }
}

You can see a demo here. I've used the primeNG demo and added what I've written above and a toggle button for the paginator's next button.
Note: The class names are slightly different than what you wrote. I assume it's due to version differences.