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

1. Create a custome 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;

}

}

2. Use In ngFor

<ul>

<li *ngFor="let datum of data | unique">

{{datum.name}}

</li>

</ul>

3. Import this pipe into module.

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

import {UniquePipe } from '../shared/pipes/uniqe.pipe.ts';

@NgModule({

imports: [NgbModule.forRoot()],

declarations: [ ItemsListComponent, UniquePipe ]

})

export class MainModule {

}