Built in pipes

1)app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from './app.component';
import { StudentListComponent } from "./student-list.component";
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent,StudentListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

2)app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'project',
    template: `<div class="container-fluid">
      <h1>Student Manager</h1>
      <student-list-view></student-list-view>
    </div>`
})
export class AppComponent{}

3)student-list.template.html

<div class="row">
  <div class="col-sm-12">
    <button class="btn btn-primary btn-lg">
      Add new student
    </button>
  </div>
</div>
<h2>List of Students</h2>
<div class="row" *ngFor="let student of students">
  <div class="col-sm-8">
    <h4>{{student.id}}: {{student.name | lowercase}} : {{student.pocketMoney | currency:user.currenyFormat }}: 
    {{student.jeeScore }} : {{student.attemptDate | date: user.dateFormat }}</h4>
  </div>
  {{student.pocketMoney}}
</div>

<div class="row" *ngFor="let student of students">
  <div class="col-sm-8">
    <h4>Score out of 10 :  {{student.jeeScore/300 | number: '2.2-2' }}</h4>
  </div>
</div>

<div class="row" *ngFor="let student of students">
  <div class="col-sm-8">
    <h4>Percentage :  {{student.jeeScore/3000 | percent: '3.1-2' }}</h4>
  </div>
</div>

<div class="row" *ngFor="let student of students">
  <div class="col-sm-8">
    <h4>{{student | json }}</h4>
  </div>
</div>

4)student-list.component.ts

import {Component} from '@angular/core';
import {Student} from './student';
@Component({
  selector: 'student-list-view',
  templateUrl: 'student-list.template.html'
})
export class StudentListComponent {
  user = {'currenyFormat':'INR',dateFormat':'dd/MM/yyyy'};
  students = Student.students;
}

5)student.ts

export class Student {
    id: number;
    name: string;
    pocketMoney: number;
    jeeScore:number;
    attemptDate:Date;

    static students: Student[] = [
        { id: 1, name: 'student1',pocketMoney:1000,jeeScore:2204,attemptDate: new Date("9/27/2017 11:25")},
        { id: 2, name: 'student2',pocketMoney:5000,jeeScore:2876,attemptDate: new Date("9/27/2016 11:25")},
        { id: 3, name: 'student3',pocketMoney:2500,jeeScore:2600,attemptDate: new Date("9/27/2015 11:25")},
        { id: 4, name: 'student4',pocketMoney:7000,jeeScore:2800,attemptDate: new Date("9/27/2013 11:25")}
    ];
}