Angular 12/11 Pipe Boolean to Yes or No Tutorial Example

Angular 11/12 pipe boolean yes no example. In this tutorial, you will learn how to convert true/false value to Yes/No in angular 11/12 app.

As well as learn how to create custom pipe for boolean type with yes no label in angular 8, angular 9, angular 10 and angular 11, 12 app.

Angular 12/11 Convert True False to Yes/No

• Step 1 – Create New Angular App
• Step 2 – Create Custom Pipe
• Step 3 – Add Code on Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On Component ts File
• Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Create Custom Pipe

In this step, you need to create custom pipe in our angular application. So, open your terminal and execute the following command:

ng generate pipe yes-no

After that, visit app directory and open file and add the following code into it:

import { Pipe, PipeTransform } from '@angular/core';
  
@Pipe({
  name: 'yesNo'
})
export class YesNoPipe implements PipeTransform {
  transform(value: any): any {
    return value ? 'Yes' : 'No';;
  }
}

Step 3 – Add Code on Module.ts File

In this step, you need to import pdf viewer module. So, visit src/app directory and open app.module.ts file. Then add the following code into it:

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 4 – Add Code on View File

In this step, create html and for display qr code in angular 11 ap. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 10/11 pipe boolean yes no Example - Tutsmake.com</h1>
   
<ul>
  <li *ngFor="let item of myarray"> Name: {{ item.name }}, Active: {{ item.active | yesNo }} </li>
</ul>

Step 5 – Add Code On Component ts File

In this step, use the custom pipe in angular app. So, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

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: 'John', active: true}, 
    {name: 'Jakob', active: false}, 
    {name: 'Eada', active: true}
  ];
}

Step 6 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

Recommended Angular Posts