mat-paginator change the placing of mat-paginator-

问题:

I have a simple mat-table with mat-paginator.

By default design it looks like this:

I would like to change the placing of the range label and put it between the navigation buttons, like this:

Basically, I need to move the div.mat-paginator-range-label an element from the top of this container between button.mat-paginator-navigation-previous and button.mat-paginator-navigation-next.

Any idea of how to do it? Thanks.

回答1:

Actually because the "mat-paginator-container" uses flexbox you can easily modify the default placing of all the components just with a custom CSS code. For instance for me:

// override material paginator
::ng-deep .mat-paginator {
    .mat-paginator-container {
        justify-content: center;
    }

    // override material paginator page switch
    .mat-paginator-range-label {
        order: 2;
    }

    .mat-paginator-navigation-previous {
        order: 1;
    }
    .mat-paginator-navigation-next {
        order: 3;
    }
}

回答2:

Ok, I create a solution for how to do it. I use a Renderer2 to do the manipulation with DOM, and it looks like this:

@ViewChild("paginator", {read: ElementRef}) paginator: ElementRef;

ngAfterViewInit(): void {
        this._renderer.insertBefore(
            this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button').parentNode,
            this.paginator.nativeElement.querySelector('.mat-paginator-range-label'),
            this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button'));
    }

In my case this._renderer is an instance of Renderer2, and also the HTML code with ViewChild decorator.

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

If someone knows the better solution how to do it, please let me know. Otherwise, I hope my answer will help you with a similar task. Thanks

回答3:

Taras, thank you for answer! This is what i really need! I have implemented by your recommendation, and have got result like this:

Implemented with custom after range label