Tuesday 21 November 2017

Angular simple sort.

Here I will be discussing about doing a simple sort using Angular and JavaScript. Let us create a simple table with an option to select sortable fields.

Component code

import { Component} from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

export class AppComponent {
  item : any[];
  keys : any[];
    this.item = [
        {firstName :'Prashobh',lastName : 'PS',age:28},
        {firstName :'Abraham',lastName : 'A',age:38},
        {firstName :'Zian',lastName : 'Z',age:16},
        {firstName :'Catherin',lastName : 'CZ',age:24},
     this.keys = Object.keys(this.item[0]); 


<select class="selectClass" [(ngModel)]="selected" (change)="onChange($event.target.value)">
 <option [ngValue]="no-value" disabled selected>Select</option>
 <option *ngFor="let k of keys">{{k}}</option>

<table class="table">
 <th scope="col">First Name</th>
 <th scope="col">Last Name</th>
 <th scope="col">Age</th>
  <tr *ngFor="let l of item">

We have created a simple table along with a select box to select sortable fields. And below is our simple sort method.

onChange(value: string) {
 this.item.sort(function (a, b) {
  if (a[value] < b[value]) {
 return -1;
  if (a[value] > b[value]) {
 return 1;
  return 0;

We are done. Select the field in select box to sort the table.

Here we have discussed about implementing a simple sort using Angular and JavaScript.

Related Info

1. How to show a date is today or yesterday or last week etc using pipe - Angular

2. Disable submit button until all mandatory fields are filled - Angular

3. Angular client side pagination.

4. Angular show more/less pagination

No comments :

Post a Comment