Can't bind to 'totalItems' since it isn't a known property of 'pagination'

i looked some solutions,but it dont work. here is my code:

//app.modules.ts,use PaginationModule

@NgModule({
  declarations: [
    AppComponent,
    IndexComponent,
    TipModalComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    PaginationModule.forRoot(),
    ModalModule.forRoot(),
    RouterModule.forRoot(appRoutes)
  ],
  entryComponents: [
    TipModalComponent
  ],
  providers: [HeadTabService,UtilService,AuthGuardService,LoginService,HttpService],
  bootstrap: [AppComponent]
})

// app.routes,register async PersoncenterModule load

export const appRoutes = [
  {
    path:'',
    redirectTo:'personcenter',
    pathMatch:'full'
  },{
    path: 'personcenter',
    canActivate: [AuthGuardService],
    loadChildren: './personcenter/personcenter.module#PersoncenterModule'
  }
  ....
];

//PersoncenterModule,regist DrawListComponent

imports: [
    SharedModule,
    RouterModule.forChild(personcenterRoutes)
  ],
  declarations: [
    ...
    DrawListComponent,
    DrawingComponent
  ]

//SharedModule, common module

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  exports:[
    CommonModule,
    FormsModule, 
    ReactiveFormsModule,
    HeadTabComponent
  ],
  declarations: [
    HeadTabComponent
  ]
})

//DrawListComponent

export class DrawListComponent implements OnInit {
  public totalItems: number = 64;
  public currentPage: number = 4;
  public smallnumPages: number = 0;

  constructor() { }

  ngOnInit() {
  }
  public setPage(pageNo: number): void {
    this.currentPage = pageNo;
  }

  public pageChanged(event: any): void {
    console.log('Page changed to: ' + event.page);
    console.log('Number items per page: ' + event.itemsPerPage);
  }
}

//DrawList Html

<div>
....
    <pagination [totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)"></pagination>
</div>

// error

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("
      </tr>
    </table>
    <pagination [ERROR ->][totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)"></pagination>"): ng:///PersoncenterModule/DrawListComponent.html@34:16
'pagination' is not a known element:
1. If 'pagination' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

[eyerean]

You should always import the ngx-bootstrap modules on the module.ts file that includes the components in which you want to use said modules.

PS: can you also close the other (same) issues that you opened?

[valorkin]

It’s fine 😃