Pipes Demo - Key-Value Pipes

key-value-pipe.component.ts

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

interface Item {
  name: string;
  price: number;
  expDate: number;
}

@Component({
  selector: 'app-key-value-pipe',
  template: `
    <h3>Default Key-Value pipe</h3>
    <p *ngFor = "let item of person | keyvalue">
      {{item.key}} - {{item.value}}
    </p>

    <h3>Custom Sort functions:</h3>

    <h4>Sort by decreasing length of string values</h4>
    <p *ngFor = "let item of person | keyvalue:customCompareFn">
      {{item.key}} - {{item.value}}
    </p>

    <h4>Sort by increasing expiry dates</h4>
    <p *ngFor = 'let item of inventory | keyvalue:increasingExpDate'>
      {{item.value.name}} expires at {{item.value.expDate | date}}
    </p>
  `,
  styleUrls: []
})
export class KeyValuePipeComponent {

  person: object = {
    name: 'Qarun',
    age: '25',
    food: 'Cheesecake'
  };

  milliseconds: number = 1000 * 60 * 60 * 24;

  inventory: Item[] = [
    {
      name: 'Cabbage',
      price: 5,
      expDate: Date.now() + (this.milliseconds * 14)
    },
    {
      name: 'Lettuce',
      price: 10,
      expDate: Date.now() + (this.milliseconds * 21)
    },
    {
      name: 'Tomatoes',
      price: 15,
      expDate: Date.now() + (this.milliseconds * 17)
    },
  ]

  constructor() { }

  customCompareFn(a: KeyValue<string, string>, b: KeyValue<string, string>) {

    if (a.value.length > b.value.length) return -1;
    if (a.value.length === b.value.length) return 0;
    if (a.value.length < b.value.length) return 1;

  }

  increasingExpDate(a: KeyValue<number, Item>, b: KeyValue<number, Item>) {

    if (a.value.expDate < b.value.expDate) return -1;
    if (a.value.expDate === b.value.expDate) return 0;
    if (a.value.expDate > b.value.expDate) return 1;

  } 

}