Angular Pipe Under Condition Example

By Hardik Savani | February 13, 2021 | Category : Angular


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...



Tags : Angular


Hardik Savani
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.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: