title: Angular2 - Pagination error
body: <p>I installed ng2-bootstrap as pagination component. I found the help from (<a href="https://valor-software.com/ng2-bootstrap/#/pagination#pager-component" rel="nofollow noreferrer">https://valor-software.com/ng2-bootstrap/#/pagination#pager-component</a>) setting up the component easily.</p>
  
  <p>Pagination also works fine as expected.</p>
  
  <p>But I am facing problem with running the existing test case. While I try to run older test cases, I am getting so many test cases because of the newly included pagination code in the **component.html" .</p>
  
  <pre><code>&lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
      [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"&gt;&lt;/pagination&gt;
  </code></pre>
  
  <p>These are the few errors that I am getting while I tried to run the test cases.</p>
  
  <pre><code>Error: Uncaught (in promise): Error: Template parse errors:
  Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("     &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton"&gt;
              &lt;pagination [ERROR -&gt;][totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow""): SearchResultComponent@84:24
  Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("ol-md-6 col-lg-6"  class="pageButton"&gt;
              &lt;pagination [totalItems]="totalNumberOfRecords" [ERROR -&gt;][(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
              "): SearchResultComponent@84:60
  Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tton"&gt;
              &lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [ERROR -&gt;][maxSize]="numberOfButtonsToShow" class="pagination-sm"
                      [boundaryLinks]="true" ["): SearchResultComponent@84:92
  Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (")]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
                      [ERROR -&gt;][boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfI"): SearchResultComponent@85:20
  Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("[maxSize]="numberOfButtonsToShow" class="pagination-sm"
                      [boundaryLinks]="true" [ERROR -&gt;][rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)"): SearchResultComponent@85:43
  Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("m"
                      [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [ERROR -&gt;][itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"&gt;&lt;/pagination&gt;
         "): SearchResultComponent@85:96
  'pagination' is not a known element:
  1. If 'pagination' is an Angular component, then verify that it is part of this module.
  2. If 'pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("&gt;&lt;/div&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton"&gt;
              [ERROR -&gt;]&lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
  No provider for NgControl ("&gt;&lt;/div&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton"&gt;
              [ERROR -&gt;]&lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
  Error: Template parse errors:
  Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("     &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton"&gt;
              &lt;pagination [ERROR -&gt;][totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow""): SearchResultComponent@84:24
  Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("ol-md-6 col-lg-6"  class="pageButton"&gt;
              &lt;pagination [totalItems]="totalNumberOfRecords" [ERROR -&gt;][(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
              "): SearchResultComponent@84:60
  Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tton"&gt;
              &lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [ERROR -&gt;][maxSize]="numberOfButtonsToShow" class="pagination-sm"
                      [boundaryLinks]="true" ["): SearchResultComponent@84:92
  Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (")]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
                      [ERROR -&gt;][boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfI"): SearchResultComponent@85:20
  Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("[maxSize]="numberOfButtonsToShow" class="pagination-sm"
                      [boundaryLinks]="true" [ERROR -&gt;][rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)"): SearchResultComponent@85:43
  Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("m"
                      [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [ERROR -&gt;][itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"&gt;&lt;/pagination&gt;
         "): SearchResultComponent@85:96
  'pagination' is not a known element:
  1. If 'pagination' is an Angular component, then verify that it is part of this module.
  2. If 'pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("&gt;&lt;/div&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton"&gt;
              [ERROR -&gt;]&lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
  No provider for NgControl ("&gt;&lt;/div&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton"&gt;
              [ERROR -&gt;]&lt;pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
      at SyntaxError.ZoneAwareError (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:2043:33)
      at SyntaxError.BaseError [as constructor] (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:64958:16)
      at new SyntaxError (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:5443:16)
      at TemplateParser.parse (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:17883:19)
      at JitCompiler._compileTemplate (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48480:68)
      at http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48363:62
      at Set.forEach (native)
      at JitCompiler._compileComponents (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48363:19)
      at createResult (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48265:19)
      at ZoneDelegate.470.ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1415:26)
      at AsyncTestZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79182:39)
      at ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79874:39)
      at ZoneDelegate.470.ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1414:32)
      at Zone.470.Zone.run (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1211:43)
      at http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1764:57
      at resolvePromise (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1728:31) [ProxyZone]
      at resolvePromise (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1704:17) [ProxyZone]
      at http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1764:17 [ProxyZone]
      at ProxyZoneSpec.onInvokeTask (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79901:39) [ProxyZone]
      at ZoneDelegate.470.ZoneDelegate.invokeTask (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1447:36) [ProxyZone]
      at Zone.470.Zone.runTask (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1251:47) [&lt;root&gt; =&gt; ProxyZone]
      at drainMicroTaskQueue (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1614:35) [&lt;root&gt;]
      at ZoneTask.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1505:25) [&lt;root&gt;]
      at data.args.(anonymous function) (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:2612:25) [&lt;root&gt;]
  </code></pre>
  
  <p>For simplicity I have not include the other error coming from the <strong>pagination</strong> html tag. It causes error from all its <strong>attributes</strong> inside the <strong>pagination</strong> tag.</p>
  
  <p>Please help me to solve this issue.</p>