angular material table pagination issue angular 10

Question

i am using angular material table for angular 10 project. I added material table successfully. but now i am trying to add pagination to my table. therefor i added below code to my component.

import {MatPaginator} from '@angular/material/paginator';

i added above import to my app.module.ts file.

this is the code that i added for my html page to load pagination

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

but this html tag did not work. it occurred error.

please check below image.

my modules

Have you added the Class is-nside the import array of your app.module ? or just do the import thing you mentionned ? — CharybdeBE, Aug 28 '20 at 11:13
Does this answer your question? [How to use paginator from material angular?](https://stackoverflow.com/questions/45318164/how-to-use-paginator-from-material-angular) — CharybdeBE, Aug 28 '20 at 11:21
You need to import the paginator module in the same module as your component — Alexander, Aug 28 '20 at 12:34

score 0 · Answer 1 · answered Aug 28 '20 at 11:20

As stated by your IDE, the module doesn't know that component. The solution is to add it in your app.module.ts (or equivalent depending where your ar ein the app)

You should import the module MatPaginatorModule in your appmodule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { AppComponent } from './app.component';


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

Note that i have imported the module and not the component directly

angular material table pagination issue angular 10

1 Answers1