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

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

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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