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