Handling Boolean Types on Angular with Pipe

This post shows you how you can handle .NET Boolean types on Angular client using Pipe. The Pipe formerly known as Filter in AngularJs is an Angular (2,3,4) framework feature that helps transform data.

Here goes a very simple pipe which converts a boolean value to a specific Yes/No string.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'questionableBoolean' })
export class QuestionableBooleanPipe implements PipeTransform {
    transform(value: boolean): string {
        return value == true ? 'Yes' : 'No'

Next, make the questionableBoolean pipe globally available so that you can use it in any component you like:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import {AppComponent}  from './app.component';

import { QuestionableBooleanPipe } from './pipes/questionable-boolean.pipe.';

export const sharedConfig: NgModule = {
    imports: [],
    declarations: [
    providers: [],
    bootstrap: [AppComponent]

Use the pipe like the following while interpolation:

{{booleanValue | questionableBoolean}}

Here, booleanValue is just a boolean field on your component. Here goes the full script of the component.


import {Component} from '@angular/core';

  selector: 'app',
  template: `<div>{{booleanValue}} is now tranformed to {{booleanValue | questionableBoolean}}</div>`
export class AppComponent implements AfterViewInit {
    booleanValue: boolean = true;

It should give you something like this on the UI: