Angular Pipes : Converting the Output

What is Angular Pipes:

Pipes are the converters that are used to transform the output of our templates.

We can use Angular pipes to transform our input to desired outputs for the user interface.

Inbuilt Pipes:

1. DatePipe: Formats a date value according to the given format.

2. UpperCasePipe: Transform the text to Uppercase.

3. LowerCasePipe: Transform the text to Lowercase.

4. CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.

5. DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.

6. PercentPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.

UpperCasePipe:

<div class="container mt-4" *ngFor="let item of servers">
    <div [class]="item.serverstate" role="alert">
        {{ item.servername }}—{{item.serverstatus}}
    </div> 
</div>

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  servers = [
    { servername:'production', serverstatus:'online',serverstate:'alert alert-success' },
    { servername:'database', serverstatus:'offline',serverstate:'alert alert-danger' },
    { servername:'development', serverstatus:'online',serverstate:'alert alert-success' },
    { servername:'client', serverstatus:'online',serverstate:'alert alert-success' },
    { servername:'design', serverstatus:'offline',serverstate:'alert alert-danger' }
  ]
}

Our application looks something like this.

<div class="container mt-4" *ngFor="let item of servers">
    <div [class]="item.serverstate" role="alert">
        {{ item.servername | uppercase }}—{{item.serverstatus | uppercase}}
    </div> 
</div>