Paginator selection number of rows not showing correctly

Issue

I have a table like this one in angular material

Can someone tell me why 'Items per page' numbers are shows under the table and not under select option element (orange marker)?

This is my html template.

<div class="container">
<div class="row">
    <div class="col-md-12">          
        <div>
            <h3>MyTable</h3>
            <div class="table-responsive">
                <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" width="100%">
                    <!-- Index Column -->
                    <ng-container matColumnDef="index">
                        <th mat-header-cell *matHeaderCellDef> x </th>
                        <td mat-cell *matCellDef="let element; let i = index;">{{ (i+1) + (paginator.pageIndex * paginator.pageSize)}}</td>
                    </ng-container>
        
                    <ng-container matColumnDef="x1">
                        <th mat-header-cell *matHeaderCellDef> x1 </th>
                        <td mat-cell *matCellDef="let element"> {{element.x1}} </td>
                    </ng-container>
        
                    <ng-container matColumnDef="x2">
                        <th mat-header-cell *matHeaderCellDef> x2</th>
                        <td mat-cell *matCellDef="let element"> {{element.x2}} </td>
                    </ng-container>
        
                    ....
                    ....
                    ....
        
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row 
                        *matRowDef="let reading; columns: displayedColumns;"
                        (click) = "onRowClicked(reading)"
                    ></tr>
                </table>
            </div>
        
            <mat-paginator #paginator
                [length]="countX"
                [pageSize]="pageSize"
                [pageSizeOptions]="pageSizeOptions"
                aria-label="Choose page"
                showFirstLastButtons>
            </mat-paginator>
        </div>
    </div>
</div>

Solution

Like @D A said in comments: I had to add css in angular.json

Do you have "styles":["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", added in your angular json?

Answered By - Hrvoje T