Jens Jens - 1 year ago 125
TypeScript Question

convert a select option to boolean value

I am learning angular2. Here I have the following Problem:

I have a

field which should work as a boolean value:

<select [(ngModel)]="caseSensitive">

No if i use it in my Filter it will send as a string not as a boolean. Is it possible to convert it using a converter or something like that:

Here my complete HTML code:

<input [(ngModel)]="nameFilter"/>
<select [(ngModel)]="caseSensitive">

<tr *ngFor="let p of (persons | MyFilter: nameFilter:caseSensitive); let i = index">
<td>{{i + 1 }} </td>
p.givenName+" "+ p.familyName
<td><img src="/img/flags/{{ p.nationality}}.png"></td>


The ts code:

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

import {MyFilter} from './MyFilter';

selector: 'pizza-root',
pipes: [MyFilter],
templateUrl: 'app.component.html'
export class AppComponent {
public year = new Date().getFullYear();
public persons =[{"givenName":"Paul", "familyName": "Smith", "nationality":"american"},
{"givenName":"Jens", "familyName":"myName1", "nationality":"german"},
{"givenName":"Ernst", "familyName":"myName1", "nationality":"german"},
{"givenName":"Jenny", "familyName":"myName1", "nationality":"german"}];
constructor (){

The Pipe:

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

name: 'MyFilter'

export class MyFilter implements PipeTransform{
transform( items: any[], args: string, caseSensitive : boolean ):any {
if (items != null && args != undefined && args != ''){
if (caseSensitive){
return items.filter(item=>item.givenName.indexOf(args)!== -1);
} else {
return items.filter(item=> item.givenName.toLowerCase().indexOf(args.toLowerCase())!== -1);
return items;


The Problem is, that the pipe not working correctly because
is the bind as a string not as a boolean value.

Answer Source

By default the values select uses are strings or they are stringified if other types are provided. If you use ngValue instead, you can use other types and ngModel retains the type.

  <select [(ngModel)]="caseSensitive">
    <option [ngValue]="false">false</option>
     <option [ngValue]="true">true</option>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download