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 and angular 11 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...

My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
- Angular Pipe for Array to String Example
- Angular Pipe for Boolean Value with Yes No Text
- Angular Pipe for Alphabetical Order Example
- Angular Pipe for Phone Number Example
- Angular Create Custom Pipe for Replace Null Values Example
- Angular 10/9/8 Uppercase Pipe Example | Uppercase Pipe in Angular
- Angular 10/9/8 Date Pipe Example | Date Pipe in Angular
- Angular 10/9/8 Currency Pipe Example | Currency Pipe in Angular
- How to Pass Multiple Parameters to Pipe in Angular?
- Angular nl2br Pipe Example