Angular Pipe Under Condition Example

Hello,

This article goes in detailed on angular pipe under condition example. you will learn angular pipe if condition. In this article, we will implement a angular multiple pipes with condition. We will look at example of pipe if statement angular.

you can easily create custom pipes under condition in angular 7, angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13 version.

In this example we will use two pipes with under condition in angular. i took one array with displayIn small or capital. if that will small then we will add lowercase pipe and capital then we will add uppercase pipe. let's see example.

Now we need to create one variables and use it, let's add code as like bellow:

app/app.component.ts

import { Component, VERSION } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  
  myArray = [
    {name: 'Hardik', 'displayIn': 'small'},
    {name: 'Paresh', 'displayIn': 'capital'},
    {name: 'Rakesh', 'displayIn': 'small'}
  ]
}

Ok, now we can use custom pipe in html file, so let's write it.

app/app.component.html

<h1>Angular pipe with if statement Example</h1>
  
<div *ngFor="let item of myArray">
  <p>{{item.displayIn == 'small' ? (item.name | lowercase) : (item.name | uppercase)}}</p>
</div>

Output:

I hope it can help you...