CODEWITHSUNDEEP
angular
Aruna
Aruna

Reputation: 13

I want to sort the table in Angular

app.component.html:

  <table id="basic-datatable"
               class="table table-centered scrolldown">
          <thead class="bg-light-grey col-12 ">
          <tr class=" ">
            <th scope="col" class="th">Sl.No</th>
            <th scope="col" (click)="sort('firstName')" style="min-width: 110px" class="th">CREATED BY</th>
            <th scope="col" style="max-width: 100px">DOMAIN URL</th>
            <th scope="col">RESULTS FOUND</th>
            <th scope="col" style="min-width: 200px">STATUS</th>
          </tr>
          </thead>

  <tr *ngFor="let element of Data$ | orderBy : key :reverse let i=index" >
            <td scope="col">{{element.CREATED}}</td>
             <td scope="col">{{element.url}}</td>
             <td scope="col">{{element.results}}</td>
             <td scope="col">{{element.status}}</td>
          </tr>
 </table>

app.component.ts:

   key ='id';
   reverse : boolean = false;
   sort(key){
   this.key=key;
   this.reverse=!this.reverse;
   }

I need to sort by column in angular.I have installed this package "npm install ng2-order-pipe". and imported this module 'Ng2OrderModule' in app.module.ts.But still i am getting this issue -(Error: No pipe found with name 'orderBy'.). Thanks.

Upvotes: 0

Views: 3078

Answers (2)

ilham doang
ilham doang

Reputation: 109

maybe I can help if you wanna use angular material if you want to change methods

app.component.html:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="calories">CREATED BY</th>
    <th mat-sort-header="fat">DOMAIN URL</th>
    <th mat-sort-header="carbs">RESULTS FOUND</th>
    <th mat-sort-header="protein">STATUS</th>
  </tr>

  <tr *ngFor="let element of Data">
    <td>{{element.CREATED}}</td>
    <td>{{element.url}}</td>
    <td>{{element.results}}</td>
    <td>{{element.status}}</td>
  </tr>
</table>

app.component.ts:

export class AppComponent implements AfterViewInit {
  displayedColumns: string[] = ['CREATED BY', 'DOMAIN URL', 'RESULTS FOUND', 'STATUS'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  constructor(private _liveAnnouncer: LiveAnnouncer) {}

  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  /** Announce the change in sort state for assistive technology. */
  announceSortChange(sortState: Sort) {
    // This example uses English messages. If your application supports
    // multiple language, you would internationalize these strings.
    // Furthermore, you can customize the message to add additional
    // details about the values being sorted.
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }
}

for more complete information on angular material:https://material.angular.io/components/sort/overview

Upvotes: 1

nillabobillababolla
nillabobillababolla

Reputation: 44

Have you tried to add your Ng2OrderModule in exports section?

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent, Ng2OrderModule ]
})

Upvotes: 1

Related Questions