app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngPipe';
  bithday = new Date(1993, 8, 10)
  name: string = 'Bipon';
  welcome: string = 'welcome';
  message = 'Welcome to my country';
  person = {
    name: 'bipon',
    profession: 'student'
  }
  public date = new Date();
}

app.component.html

<p>Kamal birthday {{bithday | date | uppercase}}</p>

<h3>Text Pipes</h3>
<p>He man! KI Khobor</p>
<p>He man! {{name | lowercase}}</p>
<p>He man! {{name | uppercase}}</p>
<p>Message:  {{message | titlecase}}</p>
<p>slice:  {{welcome | slice: 3:5}}</p>
<p>He man! {{person | json}}</p> <br/>

<h3>Number Pipes</h3>
<p>{{5.678 | number: '1.2-3'}}</p>
<p>{{5.678 | number: '3.4-5'}}</p>
<p>{{5.678 | number: '3.1-2'}}</p>

<p>{{.25 | percent}}</p>
<p>{{.25 | currency}}</p>
<p>{{.25 | currency: 'GBP'}}</p>
<p>{{.25 | currency: 'ERO': 'code'}}</p>