Mat-Paginator Page-Size-Dropdown isn't rendering properly

Question

I am trying to create a table with sorting and pagination. The paginator behaves in a strange way, when I am trying to change the number of elements which should be rendered on one page. If I click the dropdown, it renders the content of the dropdown below the table. (see screenshot) (If I click 5,10,25 or 100 it selects the right number and sets the paginator, so the functionality is given)

The code:

github-repo: https://github.com/Pethaudi/testing-mat-table

app.module:

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        NoopAnimationsModule,
        MatTableModule,
        MatSortModule,
        MatPaginatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component:

export interface PeriodicElement {
    position: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
    { position: 1 },
    { position: 2 },
    { position: 3 },
    { position: 4 },
    { position: 5},
    { position: 6 },
    { position: 7},
    { position: 8 },
    { position: 9 },
    { position: 10},
];

@Component({
    selector: 'app-root',
    template: `
<div id="body"  class="mat-elevation-z8">
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

    <table mat-table [dataSource]="dataSource" matSort>

        <!-- Position Column -->
        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef mat-sort-header appChange> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}}
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>`
})
export class AppComponent {
    @ViewChild(MatPaginator, {static: true})
    paginator: MatPaginator;

    @ViewChild(MatSort, {static: true })
    sort: MatSort;

    displayedColumns: string[] = ['position'];
    dataSource = new MatTableDataSource();

    ngOnInit() {
        this.dataSource = new MatTableDataSource(ELEMENT_DATA);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
    }
}

dependencies:

{
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.3",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

Thank you!

Answer 1

The code was correct. The mistake was that Angular Material was added via npm i @angular/material and not via ng add @angular/material .

ng add adds some other config, especially a needed theme. If no theme is given angular has troubles rendering the components properly.

To fix this the following steps are needed:

• add src/custom-theme.scss ( https://material.angular.io/guide/getting-started ) with the following content:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$testing-mat-table-primary: mat-palette($mat-indigo);
$testing-mat-table-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$testing-mat-table-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$testing-mat-table-theme: mat-light-theme($testing-mat-table-primary, $testing-mat-table-accent, $testing-mat-table-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($testing-mat-table-theme);

• in angular.json under projects.[your-project].architect.build.styles add "src/custom-theme.scss",