I am facing a problem when wanting to order an array of objects that also have objects inside, I am using [ngx-order-pipe]. I am using Angular 8. I think the problem is wanting to sort an array of objects and access other objects to be able to sort based on keys
The component.html
<table>
<thead>
<tr>
<th></th>
<th class="sortable">
<span class="sort" (click)="sort('coln1')">
<img src="{{ROOT}}/assets/arrow_off.png"/>
</span>
<span style="margin-left: 2%;">Coln1</span>
</th>
...
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let element of supplies | orderBy: orderHeader: false" >
<td style="width:1%">
<input name="supplyId" type="hidden" value="2">
</td>
<td>{{(element.coln1 != null)?element.coln1 : element.supply.coln1}}</td>
<td>{{element.supply.coln2}}</td>
<td>{{element.supply.coln3 }}</td>
<td>{{element.coln4 != null ? element.coln4 : 1}}</td>
<td style="width: 1%;"></td>
</tr>
</tbody>
</table>
component.ts
export class TableComponent implements OnInit {
@Input() suministros: any = [];
@Output() clickEvent = new EventEmitter();
orderHeader: String = "";
reverse = true;
constructor(private orderPipe: OrderPipe) {
this.ROOT = env.root;
}
ngOnInit() {}
sort(headerName: String): void {
this.reverse = !this.reverse;
this.orderHeader = headerName;
//this.suministros = this.orderPipe.transform(this.suministros, this.reverse);
}
}
And throws this error:
compiler.js:2420
Uncaught Error: Template parse errors: The pipe 'orderBy' could not be found
(</thead> <tbody> <tr *ngFor="let ele[ERROR ->]ment of supplies | orderBy: orderHeader: false")
Import OrderModule in the module where TableComponent is declared.
Let's say your TableComponent is declared in AppModule, So add OrderModule in the imports array as
import { OrderModule } from 'ngx-order-pipe';
@NgModule({
imports: [BrowserModule, OrderModule],
declarations: [AppComponent, TableComponent],
bootstrap: [AppComponent]
})
export class AppModule {}