Cacher is the code snippet organizer for pro developers

import { Component } from '@angular/core';
import { MyPipe } from './my-pipe.pipe';

@Component({
  moduleId: module.id,
  selector: 't1-app',
  pipes:[MyPipe],
  templateUrl: 't1.component.html',
  styleUrls: ['t1.component.css']
})
export class T1AppComponent {
  title = 't1 works!';

  mediaItems = [
        {
            id: 1,
            name: "Firebug",
            medium: "Series",
            category: "Science Fiction",
            year: 2010,
            watchedOn: 1294166565384,
            isFavorite: false
        },
        {
            id: 2,
            name: "The Small Tall",
            medium: "Movies",
            category: "Comedy",
            year: 2015,
            watchedOn: null,
            isFavorite: true
        }, {
            id: 3,
            name: "The Redemption",
            medium: "Movies",
            category: "Action",
            year: 2016,
            watchedOn: null,
            isFavorite: false
        }, {
            id: 4,
            name: "Hoopers",
            medium: "Series",
            category: "Drama",
            year: null,
            watchedOn: null,
            isFavorite: true
        }, {
            id: 5,
            name: "Happy Joe: Cheery Road",
            medium: "Movies",
            category: "Action",
            year: 2015,
            watchedOn: 1457166565384,
            isFavorite: false
        }
    ];
}

<h1>
  {{title}}
</h1>
<div>
	{{mediaItems | myPipe}}
</div>

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

@Pipe({
  name: 'myPipe'
})

export class MyPipe {
  transform(mediaItems) {
    var categories = [];
    mediaItems.forEach(mediaItem => {
    	if(categories.indexOf(mediaItem.category) <= -1){
    		categories.push(mediaItem.category);
    	}
    });

    return categories.join(', ');
  }
}