michaelbromley
The pipe 'paginate' could not be found
Hi, thanks for contributing!
This project is maintained in my spare time, so in order to help me address your issue as quickly as possible, please provide as much of the following information as you can.
-- Michael
[^ delete this message]
=======
Angular version: 5
ngx-pagination version:
Description of issue: The pipe 'paginate' could not be found ("="text-center"> {{'labels.No Records Found' | translate}} <tr *ngFor="let [ERROR ->]item of allItems | paginate: { itemsPerPage: 10, currentPage: page }"> "): ng:///LayoutModule/PharmaciesGirdComponent.html@16:22 'pagination-controls' is not a known element:
- If 'pagination-controls' is an Angular component, then verify that it is part of this module.
- If 'pagination-controls' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
Steps to reproduce:
Expected result:
Actual result:
Demo: (if possible, edit this StackBlitz demo and paste the link to your fork)
Any relevant code:
<div class="homegrid row" style="overflow: auto; height:430px; margin-right: 0;">
<table id="pharmacyGrid" class="table table-striped table-bordered" style="width:100%;">
<thead class="fixed_headers">
<tr >
<th style="font-size:12px; text-align: center; ">{{'labels.Offer status'|translate}}
</th>
<th style="font-size:12px; text-align: center;">{{'labels.Pharmacy'|translate}}</th>
<th style="font-size:12px; text-align: center;">
{{'labels.Total Potential Value'|translate}} ({{currencySymbol}})</th>
</tr>
</thead>
<tbody class="fixed_body">
<tr>
<td colspan="3" class="text-center"> {{'labels.No Records Found' | translate}} </td>
</tr>
<tr *ngFor="let item of allItems | paginate: { id: 'listing_pagination',
itemsPerPage: 10,
currentPage: page,
totalItems: totalRec }">
<td>{{item.offer_status}}</td>
<td>{{item.name}}</td>
<td>{{item.increment_value}}</td>
</tr>
<!-- TRIED FOR PAGINATION
<tr>
<div class="container">
<div *ngFor="let item of allItems">{{item.name}}</div>
<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
<li [ngClass]="{disabled:pager.currentPage === 1}">
<a (click)="setPage(1)">First</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === 1}">
<a (click)="setPage(pager.currentPage - 1)">Previous</a>
</li>
<li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
<a (click)="setPage(page)">{{page}}</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a (click)="setPage(pager.currentPage + 1)">Next</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a (click)="setPage(pager.totalPages)">Last</a>
</li>
</ul>
</div>
</tr> -->
</tbody>
</table>
<div>
<pagination-controls id="listing_pagination" maxSize="5" directionLinks="true" (pageChange)="page = $event"></pagination-controls>
</div>
</div>
<div class="row">
<div id="offerstatusfilterDiv" style="border: 1px solid; width:210px;" hidden class="col-md-4">
<!--<span id='close' onclick='this.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>-->
<select id="offerSelectfilter" style="width:169px;">
<!--<option value="" disabled selected>Select Offerstatus</option>-->
<option *ngFor="let offer of offerStatus" [value]="offer.id">{{offer.name}}</option>
</select>
</div>
<!-- <div class="col-md-1">
<span style="color:black;">x</span>
</div>
-->
</div>
TS file
import { Component, ViewEncapsulation, OnInit, ViewChild, HostListener } from '@angular/core'; import { GridOptions } from "ag-grid"; import { IncrementalValCellComponent } from "../incremental-val-cell/incremental-val-cell.component"; import { CommonModel } from '../../shared/commonModel'; import { HeaderService } from '../components/header/header.service'; import * as alaSQLSpace from 'alasql'; import { GskNumberPipe } from '../../gsk-number.pipe'; import { PagerService } from './pgerservice.service'; import {NgxPaginationModule} from 'ngx-pagination';
@Component({
selector: 'app-pharmacies-gird',
templateUrl: './pharmacies-gird.component.html',
styleUrls: ['./pharmacies-gird.component.css'],
encapsulation: ViewEncapsulation.None
})
export class PharmaciesGirdComponent implements OnInit {
offerStatus: any = [];
public currencySymbol;
gskNumberPipe: any
private allItems: Array
// private wasInside = false; // public text: String;
// @HostListener('click') // clickInside() { // this.text = "clicked inside"; // this.wasInside = true; // }
// @HostListener('document:click') // clickout() { // if (!this.wasInside) { // this.text = "clicked outside"; // document.getElementById("priortextInput").hidden = true; // } // this.wasInside = false; // }
ngOnInit() { this.offerStatus = [{ id: "All", name: "All Offers" }, { id: "Offer accepted", name: "Offer Accepted" }, { id: "Offer rejected", name: "Offer Rejected" }, { id: "Offer extended, response awaited", name: "Offer Extended response awaited" }, { id: "Offer not yet extended", name: "Offer not yet Extended" } ] } constructor(public headerService: HeaderService, public pagerService: PagerService) { this.gskNumberPipe = new GskNumberPipe() var filterData = this.headerService.getFilterData(); this.currencySymbol = localStorage.getItem("currencySymbol"); alert(filterData); }
buildTable(data){ // alert(data); this.allItems=data; this.totalRec = this.allItems.length; alert(this.totalRec); //setTimeout(this.afterBuildTable,8000); } afterBuildTable(data) { this.allItems=data; //this.totalRec = this.allItems.length; alert(this.allItems); //this.allItems.forEach(element1 => { // alert(element1.name);
// } ); }
/* buildTable(data) {
var _this = this;
var pharmacyGridBody = document.getElementById("pharmacyGridBody");
pharmacyGridBody.innerHTML = "";
var tr1=document.createElement("tr");
var td1 = document.createElement("td");
data.forEach(function (el) {
var tr = document.createElement("tr");
var td = document.createElement("td");
let offerStatus = el["offer_status"];
//alert(offerStatus) ;
var stauses = offerStatus.split(",");
//console.log("disst", stauses);
var disStatus = alasql("SELECT DISTINCT * FROM ?", [stauses]);
// alert(disStatus);
var offerStatusString = "<div style='text-align:center'>";
//console.log("disst", disStatus);
if(disStatus.length) {
var counter=0;
for (var s = 0; s < disStatus.length; s++) {
if(disStatus[s]) {
var offerstatus = Object.values(disStatus[s]).join("");
if ((offerstatus.toLowerCase() == "offer accepted") && counter==0 ) {
offerStatusString += "<div class=" + 'circle_accept' + "></div>";
counter++;
}
if ((offerstatus.toLowerCase() == "inactive") && counter==0 ) {
offerStatusString += "<div class=" + 'circle_accept' + "></div>";
counter++;
}
//offerstatus.toLowerCase() == "offer rejected" ||
if (offerstatus.toLowerCase().includes("rejected") == true) {
offerStatusString += "<div class=" + 'circle_reject' + "></div>";
}
//console.log("offerstatus.toLowerCase",offerstatus.toLowerCase());
//console.log("(offerstatus.toLowerCase() == 'offer extended, response awaited')",(offerstatus.toLowerCase() == "offer extended, response awaited"))
if (offerstatus.toLowerCase().indexOf("response awaited") !=-1) {
offerStatusString += "<div class=" + 'circle_extendedresponseawaited' + "></div>"
}
if (offerstatus.toLowerCase() == "offer not yet extended") {
offerStatusString += "<div class=" + 'circle_notyetextended' + "></div>"
}
if (offerstatus.toLowerCase() == "offer not communicated") {
offerStatusString += "<div class=" + 'circle_notcommunicated' + "></div>"
}
}
}
}
td.innerHTML = offerStatusString+"</div>";
tr.appendChild(td);
var td = document.createElement("td");
td.align = "center";
td.style.fontSize = "12px;";
td.appendChild(document.createTextNode(el["name"].toLowerCase()));
td.align = "center";
td.className = "text-capitalize";
tr.appendChild(td);
var td = document.createElement("td");
td.align = "right";
//td.colSpan = 2;
td.style.fontSize = "12px;";
// <div class="row">
// <div class="col-md-8 homelbl">Offer accepted</div>
// <div class="col-md-2 " style="background-color: rgba(235, 235, 235, 1);padding: 0px;height: 20px; font-size:15px; ">
// <div id="offeraccdiv" style="background-color: rgb(67, 219, 67); font-size: 15px;
// height:100%" [style.width]="offerAceptedValue" ></div>
// </div>
// <div id="offeracclbl" style="font-size: 11pt;" class="col-md-2"><label>{{offerAceptedValue}}</label></div>
// </div>
// var mainDiv = document.createElement("div"); // mainDiv.className = "row";
// var progressdiv = document.createElement("div");
// progressdiv.style.width = 100+"px;";
// progressdiv.style.border = '1px solid';
// progressdiv.style.backgroundColor = "rgba(200, 200, 200, 1)";
// progressdiv.style.height = 20+"px;";
// var colordiv = document.createElement("div");
// colordiv.id = "offeraccdiv";
// colordiv.style.backgroundColor = 'rgba(243, 102, 51, 1)';
// colordiv.style.width = el["increment_value"];
// progressdiv.appendChild(colordiv);
// mainDiv.appendChild(progressdiv);
// console.log(progressdiv);
//console.log(el["increment_value"].toLocaleString('en', { maximumSignificantDigits: 21 }));
//td.appendChild(progressdiv);
// td.appendChild(document.createTextNode(el["increment_value"].toLocaleString('en', { maximumSignificantDigits: 21 })));
td.appendChild(document.createTextNode(_this.gskNumberPipe.transform(el["increment_value"], [])));
tr.appendChild(td);
pharmacyGridBody.appendChild(tr);
// alert("Pager"+td.innerHTML);
});
// set items to json response
// FOR PAGINATION
this.allItems = data;
// initialize to page 1
this.setPage(1);
tr1.innerHTML="<tr><div class='container'><ul *ngIf='pager.pages && pager.pages.length' class='pagination'>"
+ "<li [ngClass]='{disabled:pager.currentPage === 1}'>"
+ "<a (click)='setPage(1)'>First</a></li>"
+ "<li [ngClass]='{disabled:pager.currentPage === 1}'>"
+"<a (click)='setPage(pager.currentPage - 1)'>Previous</a>"
+ "</li>"
// +"<li *ngFor='let page of pager.pages' [ngClass]='{active:pager.currentPage === page}'>"
// +"<a (click)='setPage(page)'>{{page}}</a>"
// +"</li>"
+"<li [ngClass]='{disabled:pager.currentPage === pager.totalPages}'>"
+"<a (click)='setPage(pager.currentPage + 1)'>Next</a>"
+"</li>"
+"<li [ngClass]='{disabled:pager.currentPage === pager.totalPages}'>"
+"<a (click)='setPage(pager.totalPages)'>Last</a>"
+"</li> </ul> </div> </tr>";
//tr1.click=this.setPage(1);
pharmacyGridBody.appendChild(tr1);
//tr1.click=this.setPage(1);
// td1.className="container";
// tr1.appendChild(td1);
// <div *ngFor="let item of pagedItems">{{item.name}}</div>
// for (var t = 0; t < this.allItems.length; t++){
// }
} */
setPage(page: number) { // alert("SetPage"); if (page < 1 || page > this.pager.totalPages) { return; }
// get pager object from service
this.pager = this.pagerService.getPager(this.allItems.length, page);
// get current page of items
this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
}
filterOfferSatus(event) { let offerstatusfilterDiv = document.getElementById("offerstatusfilterDiv"); offerstatusfilterDiv.hidden = false; // console.log(event.clientX); offerstatusfilterDiv.style.left = event.clientX; offerstatusfilterDiv.style.top = event.clientY -10+"px"; offerstatusfilterDiv.style.position = "absolute";
}
searchData(value) { //console.log(value); var input, filter, table, tr, td, i; //pharmacyGrid table = document.getElementById("pharmacyGrid"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; //console.log(tr[i].getElementsByTagName("td")[0]); if (td) { //console.log(value); //console.log(td.innerHTML.indexOf(value)); if (td.innerHTML.indexOf(value) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } }
}
alert("td");
}
}
This issue is not well formatted and I don't know what I should be looking at.
Please edit down to the bare minimum code which reproduces your error. Thanks.
