Displaying Data with Pipes

Check code at: https://github.com/wghglory/angular2-fundamental

Using Built-in Pipes

Now in event list page, you can see event title case is not unique, so we can use pipe to make all titles uppercase.

Take event-detail.component.html for instance:

1
2
3

<h2>{{event?.name | uppercase}} </h2>
<div><strong>Date:</strong> {{event?.date | date:'shortDate'}}</div>
<div><strong>Price:</strong> {{event?.price | currency:'USD':true}}</div>

Creating a Custom Pipe

Now a problem is duration shows number instead of readable text in event-detail’s session list.

1) create events/shared/duration.pipe.ts. Register it in barrel, AppModule

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'duration' })
export class DurationPipe implements PipeTransform {
    transform(value: number): string {
        switch (value) {
            case 1: return 'Half Hour'
            case 2: return 'One Hour'
            case 3: return 'Half Day'
            case 4: return 'Full Hour'
            default: return value.toString();
        }
    }
}

2) session-list add duration pipe:

1	<span>Duration: {{session.duration \| duration}}</span>

Sorting and Filtering Overview

Angular 1 has performance issues. One is using filter, sort by pipe. If a object array have thousands of objects and each object has many properties, it will be very costly to filter or sort. Angular 1 checks if each property of all objects has changed…

Angular 2 pipe is no longer responsible for sorting or filtering. By default, angular 2 runs the pipe only when the identity of source has changed. Angular 2 also can use “impure pipes”, which is same mechanism as angular 1 with performance issue

Filtering

In event-detail page, session-list has “level”, and we want to filter session-list by “level”. We put 4 buttons on top.

event-detail.component.ts add “filterBy” property:

...
export class EventDetailComponent implements OnInit {
    constructor(private eventService: EventService, private route: ActivatedRoute) { }

    event: IEvent
    addMode: boolean = false
+    filterBy: string = 'all';
    ...
}

event-detail.component.html

<div class="row" style="margin-bottom:10px;">
    <div class="col-md-2">
        <h3 style="margin:0">Sessions</h3>
    </div>
+    <div class="col-md-7">
+        <button class="btn btn-default" [class.active]="filterBy==='all'" (click)="filterBy='all'">All</button>
+        <button class="btn btn-default" [class.active]="filterBy==='beginner'" (click)="filterBy='beginner'">Beginner</button>
+        <button class="btn btn-default" [class.active]="filterBy==='intermediate'" (click)="filterBy='intermediate'">Intermediate</button>
+        <button class="btn btn-default" [class.active]="filterBy==='advanced'" (click)="filterBy='advanced'">Advanced</button>
+    </div>
    <div class="col-md-2">
        <a (click)="addSession()">Add Session</a>
    </div>
</div>

+ <session-list [filterBy]="filterBy" *ngIf="!addMode" [sessions]="event?.sessions"></session-list>

session-list.component.ts

+ import { Component, Input, OnChanges } from '@angular/core'
import { ISession } from '../shared/index'

@Component({
    selector: 'session-list',
    templateUrl: 'app/events/event-detail/session-list.component.html'
})
export class SessionListComponent implements OnChanges {
    @Input() sessions: ISession[]
+    @Input() filterBy: string
+    visibleSessions: ISession[] = [];

    //whenever the input variable changes
+    ngOnChanges() {
+        if (this.sessions) {
+            this.filterSessions(this.filterBy);
+        }
+    }

+    filterSessions(filter) {
+        if (filter === 'all') {
+            // this.visibleSessions = this.sessions;  //wrong, we want to make a copy
+            this.visibleSessions = this.sessions.slice(0);  //clone the arr
+        } else {
+            this.visibleSessions = this.sessions.filter(s => {
+                return s.level.toLocaleLowerCase() == filter;
+            })
+        }
+    }
}

session-list.component.html: use visiableSessions instead of sessions

1	<div class="row" *ngFor="let session of visibleSessions">

Sorting

sorting by name, voters