Pipes Demo - Text-based pipes

text-based-pipes.component.ts

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

@Component({
  selector: 'app-text-based-pipes',
  template: `
    <h2>Text-based Pipes!</h2>
    <p>This is our string: {{text}}</p>
    <br>

    <p>Uppercase Pipe -> {{text | uppercase}}</p>
    <p>Lowercase Pipe -> {{text | lowercase}}</p>
    <p>Titlecase Pipe -> {{text | titlecase}}</p>
  `,
  styleUrls: []
})
export class TextBasedPipesComponent {
  text: string = 'My sTriNg to ChANge!';
}