Error: Template parse errors: There is no directive with "exportAs" set to "paginationAPI"

[Tejasvi2]

Hi,

Angular version: 3.9.2

ngx-pagination version: ^4.1.0

Description of issue: The parent component is been created to render the child component i.e pagination directive template.

The following are mine code: component.module.ts.

import { PaginationComponent } from "../components/pagination/pagination";

@NgModule({
    declarations: [
        PaginationComponent
    ],
    exports: [
        PaginationComponent
    ],
});

I have created a component with a export class PaginationComponent.

In pagination.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { PaginationInstance } from 'ngx-pagination';

@Component({
  selector: 'pagination',
  templateUrl: 'pagination.html'
})
export class PaginationComponent {
    // some inputs & outputs.....
}

In pagination.html

                        <pagination-template #p="paginationAPI">

                         <div class="custom-pagination">
                         <div class="pagination-item pagination-first" [class.disabled]="p.isFirstPage()">
                         <a (click)="p.setCurrent(1)"> << </a>
                         </div>
                         <div class="pagination-item pagination-previous" [class.disabled]="p.isFirstPage()">
                         <a (click)="p.previous()"> < </a>
                         </div>

                         <div *ngFor="let page of p.pages" class="pagination-item" [class.current]="p.getCurrent() === page.value">
                         <a (click)="p.setCurrent(page.value)" >
                         <span>{{ page.label }}</span>
                         </a>
                         </div>

                         <div class="pagination-item pagination-next" [class.disabled]="p.isLastPage()">
                         <a  (click)="p.next()"> > </a>
                         </div>
                         <div class="pagination-item pagination-last" [class.disabled]="p.isLastPage()">
                         <a  (click)="p.setCurrent(p.getLastPage())"> >> </a>
                         </div>
                         </div>

                         </pagination-template>

Expected result: Should show the pagination.

Actual result:

When we try to run the code it is giving below error

core.js:1449 ERROR Error: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "paginationAPI" (">
<!-- <label>{{"LBL_PAGES" | translate}}</label> -->
                         <pagination-template [ERROR ->]#p="paginationAPI">

"): ng:///ComponentsModule/PaginationComponent.html@5:46
'pagination-template' is not a known element:
1. If 'pagination-template' is an Angular component, then verify that it is part of this module.
2. If 'pagination-template' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </ul> -->
<!-- <label>{{"LBL_PAGES" | translate}}</label> -->
                         [ERROR ->]<pagination-template #p="paginationAPI">

"): ng:///ComponentsModule/PaginationComponent.html@5:25
Error: Template parse errors:
There is no directive with "exportAs" set to "paginationAPI" (">
<!-- <label>{{"LBL_PAGES" | translate}}</label> -->
                         <pagination-template [ERROR ->]#p="paginationAPI">

"): ng:///ComponentsModule/PaginationComponent.html@5:46
'pagination-template' is not a known element:
1. If 'pagination-template' is an Angular component, then verify that it is part of this module.
2. If 'pagination-template' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </ul> -->
<!-- <label>{{"LBL_PAGES" | translate}}</label> -->
                         [ERROR ->]<pagination-template #p="paginationAPI">

"): ```

[michaelbromley]

Hi, in your app are you importing the NgxPaginationModule anywhere into your app? I don't see it in your code sample. If not, follow the instructions here: https://github.com/michaelbromley/ngx-pagination#simple-example

[Tejasvi2]

Thanks, Michael It's working now