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
