Pipe trong angular 4

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

<div style = "width:100%;">
  <div style = "width:40%;float:left;border:solid 1px black;">
     <h1>Uppercase Pipe</h1>
     <b>{{title | uppercase}}</b><br/>
     
     <h1>Lowercase Pipe</h1>
     <b>{{title | lowercase}}</b>
     
     <h1>Currency Pipe</h1>
     <b> {{6589.23 | currency:"VND"}}</b><br/>
     <b> {{6589.23 | currency:"VND":true}}</b> // Giá trị true để hiển thị kí hiệu của tiền tệ.
     
     <h1>Date pipe</h1>
     <b>{{todaydate | date:'d/M/y'}}</b><br/>
     <b>{{todaydate | date:'shortTime'}}</b>
     
     <h1>Decimal Pipe</h1>
     <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 là phần nguyên, 4-4 là phần thực
  </div>
  
  <div style = "width:40%;float:left;border:solid 1px black;">
     <h1>Json Pipe</h1>
     <b>{{ jsonval | json }}</b>
     <h1>Percent Pipe</h1>
     <b>{{00.54565 | percent}}</b>
     <h1>Slice Pipe</h1>
     <b>{{months | slice:2:6}}</b> 
     // 2 và 6 là vị trí bắt đầu và vị trí kết thúc
  </div>
</div>

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
// Chỉ ra đường dẫn của sqrt pipe
import { SqrtPipe } from './app.sqrt';
@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    ChangeTextDirective,
    // Khai báo sqrt pipe
    SqrtPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }