kevinchisholm

<p>The name is {{customersAttended.name}} </p>
<p>The date is {{customersAttended.date | date: 'longDate' }} </p>
<p>The cost is {{customersAttended.cost | currency }} </p>
<p>The password is {{customersAttended.password | testPipe | uppercase }} </p

kevinchisholm

<p>The name is {{customersAttended.name}} </p>
<p>The date is {{customersAttended.date | date: 'longDate' }} </p>
<p>The cost is {{customersAttended.cost | currency }} </p>
<p>The password is {{customersAttended.password |  testPipe }} </p>

kevinchisholm

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

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

kevinchisholm

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

@Pipe({
    name: 'testPipe'
})
export class TestPipePipe implements PipeTransform {

kevinchisholm

<p>The name is {{customersAttended.name}} </p>
<p>The date is {{customersAttended.date | date: 'longDate' }} </p>
<p>The cost is {{customersAttended.cost | currency }} </p>

kevinchisholm

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

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

kevinchisholm

<p>The name is {{customersAttended.name}} </p>
<p>The date is {{customersAttended.date | date: 'longDate' }} </p>

kevinchisholm

<p>The name is {{customersAttended.name}} </p>
<p>The date is {{customersAttended.date | date }} </p>

kevinchisholm

<p>The name is {{customersAttended.name}} </p>
<p>The date is {{customersAttended.date}} </p>

kevinchisholm

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

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