angular2-chapter09

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:

    
{{event?.name | uppercase}} 
    
Date: {{event?.date | date:'shortDate'}}
    
Price: {{event?.price | currency:'USD':true}}

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:

Duration: {{session.duration | duration}}

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

    

        
Sessions
    
+    

+        All
+        Beginner
+        Intermediate
+        Advanced
+    
    

        Add Session
    


+ 

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

Sorting

sorting by name, voters

event-detail.component.html

...
    

        

            
Sessions
        
        

+            

+                By Name
+                By Votes
+            

            

                All
                Beginner
                Intermediate
                Advanced
            
        
        

            Add Session
        
    

+    
    

event-detail.component.ts add sortBy property:

sortBy: string = 'votes';  //default votes

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[] = [];
+    @Input() sortBy: string

    //whenever the input variable changes
    ngOnChanges() {
        if (this.sessions) {
            this.filterSessions(this.filterBy);
+           this.sortBy === 'name' ? this.visibleSessions.sort(sortByNameAsc) : this.visibleSessions.sort(sortByVotesDesc)
        }
    }

    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;
            })
        }
    }
}

+ function sortByNameAsc(s1: ISession, s2: ISession) {
+    if (s1.name > s2.name) return 1;
+    else if (s1.name === s2.name) return 0;
+    else return -1;
+ }

+ function sortByVotesDesc(s1: ISession, s2: ISession) {
+    return (s2.voters.length - s1.voters.length);
+ }