Filtering JSON by key value using pipes

I have an array of objects in the following format:

{
            img: './app/images/codeeval.png',
            name: 'codeEval',
            repo: 'https://github.com/Shooshte/CodeEval',
            description: 'CodeEval challenges solutions written in javascript and posted to gitHub.',
            github: true,
            demo: false,
            finished: true
        }

Now what I am trying to do is to write a custom pipe, that takes a string, and then checks if the object has this string set as true. So let's say I pass in 'demo', it would return all the objects that have demo: true.

my html:

<div *ngFor="#p of pages | pagesFilter: 'demo'" class="portfolioPageContainer">
    <img [attr.src]="p.img" class="portfolioThumbnail">
    <h2>{{ p.name }}</h2>
    <a [attr.href]="p.repo">
        <div>
            <p>{{ p.description }}</p>
        </div>
        <p class="portfolioRepoLink">See the Code!</p>
    </a>
</div>

my component:

import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import {Pipe, PipeTransform} from 'angular2/core';

@Component({
    selector: 'portfolio',
    templateUrl: '/app/views/portfolio.html',
    styleUrls: ['../app/styles/PortfolioMobile.css', '../app/styles/PortfolioOther.css'],
    pipes: [pagesFilter],
    encapsulation: ViewEncapsulation.None
})

export class PortfolioComponent {
    pages = [{
        img: './app/images/placeholder.png',
        name: 'veryNiceWords',
        repo: 'https://github.com/Shooshte/veryNiceWords',
        description: 'A hobby app, made to enable posting, rating and sharing quotes over social networks. Work in progress.',
        github: true,
        demo: false,
        finished: false
    },
        {
            img: './app/images/placeholder.png',
            name: 'ZIC IJS',
            repo: 'https://github.com/Shooshte/ZIC',
            description: 'Refurbishing of on old library webpage with AngularJS.',
            github: true,
            demo: false,
            finished: false
        },
        {
            img: './app/images/weather.png',
            name: 'Show the Local weather',
            repo: 'http://codepen.io/shooshte/pen/NxOwOX',
            description: 'A freeCodeCamp exercise, designed to show the local weather.',
            github: false,
            demo: true,
            finished: true
        },
        {
            img: './app/images/calculator.png',
            name: 'Calculator',
            repo: 'http://codepen.io/shooshte/pen/qbjJdy',
            description: 'A freeCodeCamp exercise, which requires you to build a javascript calculator.',
            github: false,
            demo: true,
            finished: true
        },
        {
            img: './app/images/github.png',
            name: 'MTGO Draft Replayer',
            repo: 'https://github.com/Shooshte/MTGO-Draft-Replayer',
            description: 'A simple web app that opens a MTGO draft log file, and re-creates the draft from it.',
            github: true,
            demo: false,
            finished: false
        },
        {
            img: './app/images/codeeval.png',
            name: 'codeEval',
            repo: 'https://github.com/Shooshte/CodeEval',
            description: 'CodeEval challenges solutions written in javascript and posted to gitHub.',
            github: true,
            demo: false,
            finished: true
        }];
}

@Pipe({ name: 'pagesFilter' })
class pagesFilter implements PipeTransform {
    transform(pages: Array, [key]): string {
        return pages.hasOwnProperty(key);
    }
}

I get the following error in the console:

angular2.dev.js:23730 EXCEPTION: Error: Uncaught (in promise): Unexpected piped value 'undefined' on the View of component 'PortfolioComponent'

Can somebody please point out what I'm doing wrong?

Thanks for the help

Hoisting isn't supported for classes. You need to define your pipe before your class:

@Pipe({ name: 'pagesFilter' })
class pagesFilter implements PipeTransform {
  transform(pages: Array, [key]): string {
    return pages.hasOwnProperty(key);
  }
}

@Component({
  selector: 'portfolio',
  templateUrl: '/app/views/portfolio.html',
  styleUrls: ['../app/styles/PortfolioMobile.css', '../app/styles/PortfolioOther.css'],
  pipes: [pagesFilter],
  encapsulation: ViewEncapsulation.None
})
export class PortfolioComponent {
  (...)
}

Update

Your pipe should return an array not a boolean:

@Pipe({ name: 'pagesFilter' })
class pagesFilter implements PipeTransform {
  transform(pages: Array, [key]): string {
    return pages.filter(page => {
      return page.hasOwnProperty(key);
    });

  }
}