Pipes

Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe.

In this activity, you will import a pipe and use it in the template.

To use a pipe in a template include it in an interpolated expression. Check out this example:

import {UpperCasePipe} from '@angular/common';

@Component({
  ...
  template: `{{ loudMessage | uppercase }}`,
  imports: [UpperCasePipe],
})
export class App {
  loudMessage = 'we think you are doing great!'
}

Now, it's your turn to give this a try:

1. Import the LowerCase pipe

   First, update app.ts by adding the file level import for LowerCasePipe from @angular/common.

   import {LowerCasePipe} from '@angular/common';

2. Add the pipe to the template imports

   Next, update @Component() decorator imports to include a reference to LowerCasePipe

   @Component({
     ...
     imports: [LowerCasePipe]
   })

3. Add the pipe to the template

   Finally, in app.ts update the template to include the lowercase pipe:

   template: `{{ username | lowercase }}`

Pipes can also accept parameters which can be used to configure their output. Find out more in the next activity.

P.S. you are doing great ⭐️