matthiasbaldi
commented
4 years ago You may forgot to import the module?
The following lines are needed in the app.module.ts
...
import { OrderModule } from 'ngx-order-pipe';
...
@NgModule({
declarations: [
...
],
imports: [
...
OrderModule
]
...That's it. After this implementation it worked for me.
HTML file /<tr ngFor="let injury of statusByInjury | orderBy: order:!reverse:'case-insensitive' | paginate: { itemsPerPage: 4, currentPage: p , id: 'proposedReturnTable' }; index as i "> */
import { Component, OnInit } from '@angular/core'; import { DateFormatService } from 'src/app/services/date-format.service'; //import { ClaimOverviewService } from 'src/app/services/claim-overview.service'; import { OrderPipe } from 'ngx-order-pipe';
@Component({ selector: 'app-injury-status', templateUrl: './injury-status.component.html', styleUrls: ['./injury-status.component.scss'] }) export class InjuryStatusComponent implements OnInit {
public browserLang: string; claimDetails: any; statusByInjury: any; ClaimReturn: any[] ; p = 1; sortedCollection: any[]; order: string = 'areaOfInjury'; reverse: boolean = false; constructor(private dateFormatService:DateFormatService, private orderPipe: OrderPipe) { this.sortedCollection = orderPipe.transform(this.statusByInjury, this.order); console.log(this.orderPipe.transform(this.statusByInjury, 'areaOfInjury')); }
ngOnInit() { //this.claimDetails = this.claimOverviewService.getInjuryData(); this.claimDetails = { "id": "1a6ddfb5-79ba-49b5-a0aa-8cffc8120519_12", "result": { "claimNumber": "000-00-000403", "statusByInjury": [ { "type": "trunk", "status": "accepted", "decisionDate": "2019-01-10T18:30:00Z", "areaOfInjury": "41" }, { "type": "upper", "status": "denied", "decisionDate": "2019-02-10T18:30:00Z", "areaOfInjury": "34" }, { "type": "lower", "status": "pending", "decisionDate": "2019-03-10T18:30:00Z", "areaOfInjury": "55" }, { "type": "multiple", "status": "pending", "decisionDate": "2019-04-10T18:30:00Z", "areaOfInjury": "66" }, { "type": "head", "status": "pending", "decisionDate": "2019-05-10T18:30:00Z", "areaOfInjury": "19" }, { "type": "head", "status": "accepted", "decisionDate": "2019-06-10T18:30:00Z", "areaOfInjury": "16" }, { "type": "lower", "status": "accepted", "decisionDate": "2019-07-10T18:30:00Z", "areaOfInjury": "51" }, { "type": "head", "status": "denied", "decisionDate": "2019-08-10T18:30:00Z", "areaOfInjury": "14" }, { "type": "head", "status": "pending", "decisionDate": "2019-09-10T18:30:00Z", "areaOfInjury": "12" }, { "type": "lower", "status": "pending", "decisionDate": "2019-10-10T18:30:00Z", "areaOfInjury": "57" }, { "type": "multiple", "status": "accepted", "decisionDate": "2019-11-10T18:30:00Z", "areaOfInjury": "65" }, { "type": "lower", "status": "denied", "decisionDate": "2019-12-10T18:30:00Z", "areaOfInjury": "53" }, { "type": "head", "status": "accepted", "decisionDate": "2019-03-10T18:30:00Z", "areaOfInjury": "11" }, { "type": "neck", "status": "pending", "decisionDate": "2019-08-10T18:30:00Z", "areaOfInjury": "21" }, { "type": "multiple", "status": "accepted", "decisionDate": "2019-05-10T18:30:00Z", "areaOfInjury": "65" } ] }, "jsonrpc": "2.0" } this.statusByInjury = this.claimDetails.result.statusByInjury; this.getMonthName(); this.setOrder('proposed'); } getMonthName() { this.statusByInjury.forEach((element: any) => { this.dateFormatService.getMonthName(element.decisionDate); }); } setOrder(value: string) { if (this.order === value) { this.reverse = !this.reverse; } this.order = value; } }