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],})class AppComponent {    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.component.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.component.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 ⭐️