In Angular2 *ngFor iteration, how do I output only unique values from the array?

Question

Does it have a built in pipe to do so?

data = [
  {id: 5, name: \'Roger\'},
  {id: 5, name: \'Mark\'},
  {id: 5, name: \'Zach\'},
  {id: 5, name: \'Mark\'},
         


        

Answer 1

You can create your own pipe.

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash'; 

@Pipe({
  name: 'unique',
  pure: false
})

export class UniquePipe implements PipeTransform {
    transform(value: any): any{
        if(value!== undefined && value!== null){
            return _.uniqBy(value, 'name');
        }
        return value;
    }
}

You need to add in the component the UniquePipe and than add in the HTML file the pipe.

  

    {{datum.name}}