I try to display maximum and minimum values in my table how can we get with angular 2 built in pipes here i try like this

 <td > {{value.max | MaxMinPipe}} </td>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'MaxMinPipe'
})
export class MaxMinPipe implements PipeTransform {
  transform(value) {
   return Math.max(value);
  }

}

I try to display maximum and minimum values in my table how can we get with angular 2 built in pipes here i try like this

 <td > {{value.max | MaxMinPipe}} </td>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'MaxMinPipe'
})
export class MaxMinPipe implements PipeTransform {
  transform(value) {
   return Math.max(value);
  }

}

• javascript
• angular

Share Improve this question Follow edited Nov 20, 2017 at 9:31 Mohamed Gara 2,93533 gold badges1616 silver badges2121 bronze badges asked Mar 30, 2017 at 11:10 U rockU rock 77522 gold badges1515 silver badges3737 bronze badges 3

• What table? minimal reproducible example – Tatsuyuki Ishi Commented Mar 30, 2017 at 11:12
• Your question is unclear. Do you want to use the same pipe for both min/max? What is value.max? – Lys Commented Mar 30, 2017 at 11:21
• I need to use two pipes for max and min like this may be <tr *ngFor="let rpi of rpitable"> <td > {{rpi.north_h | MaxPipe}} </td> <tr *ngFor="let rpi of rpitable"> <td > {{rpi.north_h | MinPipe}} </td> – U rock Commented Mar 30, 2017 at 11:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Its pretty easy way to get max amd min using ngx-pipes

 <td > {{rpi.north_h | max}} </td>
 <td > {{rpi.north_h | min}} </td>

Well, I can see two ways to achieve this:

1st. - Create a pipe that returns both (max and min value) - IMO, it's the preferable approach:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'maxMin'
})
export class MaxMinPipe implements PipeTransform {

  transform(value: any[], prop: string) {
    if (!Array.isArray(value) || value.length === 0 || !prop) { 
      return value;
    }

    // Here we sort the items based on passed `property`
    value.sort((a, b) => b[prop] - a[prop]);
    const max = value[0][prop];
    const min = value[value.length - 1][prop];

    return [max, min];
  }
}

Instead of sort you can also use something like this (not sure which one has a better performance):

const mappedArr = value.map(x => x[prop]);
const max = Math.max(...mappedArr);
const min = Math.min(...mappedArr);

Template:

<table>
  <tr>
    <th>Max value</th>
    <th>Min value</th>
  </tr>
  <tr *ngIf="data | maxMin: 'myProperty' as result">
    <td>{{ result[0] }}</td>
    <td>{{ result[1] }}</td>
  </tr>
</table>

Note that using the as syntax as I did above, in addition to improve the performance, because it just calls the pipe one time, it provides more readability :)

PLUNKER

2nd. - Split into 2 pipes, like this:

MaxPipe:

...
export class MaxPipe implements PipeTransform {

  transform(value: any[], prop: string) {
    if (!Array.isArray(value) || value.length === 0 || !prop) { 
      return value;
    }

    value.sort((a, b) => b[prop] - a[prop]);
    return value[0][prop];
  }
}

MinPipe:

...
export class MinPipe implements PipeTransform {

  transform(value: any[], prop: string) {
    if (!Array.isArray(value) || value.length === 0 || !prop) { 
      return value;
    }

    value.sort((a, b) => a[prop] - b[prop]);
    return value[0][prop];
  }
}

In template:

<td>{{ data | max: 'yourProperty' }}</td>
<td>{{ data | min: 'yourProperty' }}</td>

PLUNKER

Note that you must pass the property you want to use to pare and then get the min and max value. Probably, in your case it's "north_h".

Tips:

• Don't forget to add the Pipe to the declarations in your NgModule.

import { PipeTransform, Pipe} from '@angular/core';

    @Pipe({
        name: 'MaxValueFilter'
    })

    export class MaxPipe implements PipeTransform {
           transform(value:any[]) : number {
                let maxValue : number = value[0].north_h;
                for(var  val in value){
                  if(maxValue < val.north_h){
                     maxValue = val.north_h;
                  }
                }
                return maxValue;
           }
    }