Angular Pipe for Boolean Value with Yes No Text
Hello,
Now, let's see tutorial of angular pipe boolean yes no. it's simple example of angular true/false to yes/no. we will help you to give example of angular pipe true false yes/no. you'll learn angular pipe boolean yes no. Follow bellow tutorial step of pipe for boolean yes and no angular.
you can easily create custom pipe for boolean type with yes no label in angular 7, angular 8, angular 9, angular 10 and angular 11 version.
here, you have to follow few step to create simple example of custom pipe for true/false to yes/no. let's see one by one.
Step 1: Create New App
If you are doing example from scratch then You can easily create your angular app using bellow command:
ng new app-material
Step 2: Create Custom Pipe
We need to run following command to creating pipe in angular application.
ng generate pipe yes-no
Now we need to write some logic on our custom pipe ts file. so let's write logic as i written for demo now.
app/yes-no.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'yesNo'
})
export class YesNoPipe implements PipeTransform {
transform(value: any): any {
return value ? 'Yes' : 'No';;
}
}
now it should be import in module.ts file as bellow:
app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { YesNoPipe } from './yes-no.pipe';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, YesNoPipe ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Step 3: Use Custom Pipe
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: 'Haresh', active: true},
{name: 'Paresh', active: false},
{name: 'Amit', active: true}
];
}
Ok, now we can use custom pipe in html file, so let's write it.
app/app.component.html
<h1>angular pipe boolean yes no Example - ItSolutionStuff.com</h1>
<ul>
<li *ngFor="let item of myarray"> Name: {{ item.name }}, Active: {{ item.active | yesNo }} </li>
</ul>
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 Phone Number Example
- Angular Create Custom Pipe for Replace Null Values Example
- Angular 11/10 Create Custom Pipe Example
- Angular 10/9/8 Pipes Example | Angular Pipes List Tutorial
- Angular 10/9/8 LowerCase Pipe Example | LowerCase Pipe in Angular
- Angular 10/9/8 Slice Pipe Example | Slice Pipe in Angular
- Angular 10/9/8 Percent Pipe Example | Percent Pipe in Angular
- Angular 10/9/8 Date Pipe Example | Date Pipe in Angular
- How to Use Angular Pipe in Component Class?
- How to Pass Multiple Parameters to Pipe in Angular?
- Angular nl2br Pipe Example