1 Answer

0 votes
by (13.1k points)
Angular 7 Pipes

In Angular 1, filters are used which are later called Pipes onwards Angular2. In Angular 7, it is known as pipe and used to transform data. It is denoted by symbol |


{{title | uppercase}}   

Pipe takes integers, strings, arrays, and date as input separated with |. It transforms the data in the format as required and displays the same in the browser.

Let's see an example using pipes. Here, we display the title text in upper and lower case by using pipes.


Define a variable named "title" in component.ts file.

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



  selector: 'app-root',  

  templateUrl: './app.component.html',  

  styleUrls: ['./app.component.css']  


export class AppComponent {  

  title = 'my-first-app';  


Use the pipe symbol in component.html file:


   {{ title | uppercase }} <br/></h1>  


  {{ title | lowercase }} <br/></h1>

Related questions