Angular 12 Pipe Boolean to Yes or No Tutorial

Angular 12 pipe boolean yes no example; In this tutorial, i will show you step by step on how to convert true/false value to Yes/No in angular 12 app.

Create custom pipe for boolean type with yes no label in angular 8, angular 9, angular 10 and angular 11, 12 app.

How to Convert True False to Yes/No in Angular 12

  • Step 1 – Create New Angular App
  • Step 2 – Create Custom Pipe
  • Step 3 – Import Modules 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

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Create Custom Pipe

Create custom pipe in your 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 – Import Modules on Module.ts File

Import installed modules; so go to 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

Create yes no button in angular app. So, go to src/app/app.component.html and update the following code into it:

<h1>Angular 12 pipe boolean yes no Example - laratutorials.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

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

Execute the following commands on terminal to start angular app:

ng serve

Recommended Angular Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *