2

I'm trying to add a pagination to my Angular application as explained in this link:

Go to "Content switching"

I did this:

In app.module.ts:

import { PaginationModule } from 'ngx-bootstrap/pagination';

@NgModule({
   imports: [
       @NgModule({
    ]
})

In app.component.html:

<div class="container">
 <div class="row">
  <div class="row">
    <div class="col-xs-12 col-12">
      <div class="content-wrapper">
      <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
      </div>
      <pagination [totalItems]="contentArray.length" (pageChanged)="pageChanged($event)"></pagination>
    </div>
   </div>
 </div>
</div>

In app.component.ts:

import { Component, OnInit, Injectable } from '@angular/core';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
@Injectable({
  providedIn: 'root'
})
export class AppComponent implements OnInit {

  contentArray = new Array(90).fill('');
  returnedArray: string[];

  ngOnInit(): void {
    this.contentArray = this.contentArray.map((v: string, i: number) 
   => `Content line ${i + 1}`);
   this.returnedArray = this.contentArray.slice(0, 10);
 }

 pageChanged(event: PageChangedEvent): void {
    const startItem = (event.page - 1) * event.itemsPerPage;
    const endItem = event.page * event.itemsPerPage;
    this.returnedArray = this.contentArray.slice(startItem, endItem);
   }
 }

But when I compile I have the following error:

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(RootModule)[PaginationComponent -> PaginationConfig]: StaticInjectorError(Platform: core)[PaginationComponent -> PaginationConfig]: NullInjectorError: No provider for PaginationConfig! Error: StaticInjectorError(RootModule)[PaginationComponent -> PaginationConfig]: StaticInjectorError(Platform: core)[PaginationComponent -> PaginationConfig]: NullInjectorError: No provider for PaginationConfig! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896) at resolveToken (core.js:9141) at tryResolveToken (core.js:9085)

Any idea on what's wrong?

1 Answer 1

4

It's should be this right ?

import { PaginationModule } from 'ngx-bootstrap';

@NgModule({
  imports: [PaginationModule.forRoot(),...]
})
2
  • That's it... just found the solution a second ago. Why sometimes you need to add the forRoot()? Sorry for the question... newbie in Angular...
    – Sonhja
    May 14, 2019 at 10:39
  • when you use forRoot() and it will be app wide
    – Tony Ngo
    May 14, 2019 at 10:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.