How can I only show results in which the value of card.column matches column.id in angular2

Question

I have the code below and it works fine, what it does is ngFor repeat to create a column for each column in the column object.

Currently, it shows each map from the map object in each column.

What I want to do is show only the cards in the WHERE column.id = card.column

How can I change my code to do this?

import {Input, Output, EventEmitter, Component, Injectable} from 'angular2/core' import {NgFor} from 'angular2/common' import {Observable} from 'rxjs/Observable'; interface Card { id?: number; title?: string; column?: number; } @Injectable() export class DataService { cards$: Observable<Array<Card>>; private _cardsObserver: any; private _dataStore: Array<Card>; constructor(){ this._dataStore = [ {id: 1, title: 'Card A', column: 1}, {id: 2, title: 'Card B', column: 2}, {id: 3, title: 'Card C', column: 2} ]; this.cards$ = new Observable(observer => this._cardsObserver = observer).share(); } loadCards() { this._cardsObserver.next(this._dataStore); } addCard(){ this._dataStore.push({id: 4, title: 'Card D', column: 3}); this._cardsObserver.next(this._dataStore); } getColumns(){ var columns = [ {id: 1, title: 'Column One'}, {id: 2, title: 'Column Two'}, {id: 3, title: 'Column Three'} ]; return columns; } } @Component({ selector: 'app', providers: [DataService], directives: [], template: ` <button (click)="dataService.addCard()">Add Card</button> <div class="columns" *ngFor="#c of columns"> {{c.title}} <div class="card" *ngFor="#card of cards">{{card.title}}</div> </div> ` }) export class App { private cards: Array<Card>; private columns: any; constructor(public dataService: DataService) { dataService.cards$.subscribe(updatedCards => this.cards = updatedCards); dataService.loadCards(); this.columns = dataService.getColumns(); } } 

Answer 1

As @Langley said in his comment, I would create a custom channel for this:

 import {Injectable, Pipe} from 'angular2/core'; @Pipe({ name: 'filter' }) @Injectable() export class CardFilterPipe implements PipeTransform { transform(items: any[], args: any[]): any { return items.filter(item => item.column === args[0]); } } 

And use it like this:

 <div class="columns" *ngFor="#c of columns"> {{c.title}} <div class="card" *ngFor="#card of cards | filter:c">{{card.title}}</div> </div> 

If you want to take into account the update, you need to set the pure attribute to false:

 @Pipe({ name: 'filter', pure: false }) @Injectable() export class CardFilterPipe implements PipeTransform { (...) } 

Hope this helps you, Thierry