Ion-option with value="null"


Hi every one! How are you?

Is there a way to determine that an ion-option should return null value like in Angular 2.2.1 and above?

Example in Angular 2.2.1 and above:

<select [(ngModel)]="ok">
      <option [ngValue]="null">N/A</option>
      <option [ngValue]="true">Yes</option>
      <option [ngValue]="false">No</option>

In this case, the return should be null, true or false of boolean type and not string.

Right now, thank you all!


Can anybody help me, please?


You can set it with value=“var”

        <ion-select [(ngModel)]="ok">
          <ion-option value="{{var1}}">N/A</ion-option>
          <ion-option value="{{var2}}">Yes</ion-option>
          <ion-option value="{{var3}}">No</ion-option>

and set in your .ts file
var1= null;
var2= true;
var3= false;


Hi, @Nexi! Thanks for the answer!

But in this case, the return I get is: ‘’, ‘true’ and ‘false’, in string format. And I expect a boolean type return.

Here is my .ts file:

export class IonSelectTestPage {

  private ok: boolean = null;

  private var1: boolean = null;
  private var2: boolean = true;
  private var3: boolean = false;

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  send(): void {
    console.log('=====  SEND  =====')
    if (this.ok) {
    if (!this.ok) {
      console.log("not ok!");
    if (this.ok == null) {


My .html file:


    <ion-title>Ion Select Test</ion-title>


<ion-content padding>
      <ion-label>Is valid?</ion-label>
      <ion-select [(ngModel)]="ok">
        <ion-option value="{{var1}}">Indeterminate</ion-option>
        <ion-option value="{{var2}}">Valid</ion-option>
        <ion-option value="{{var3}}">Invalid</ion-option>
  <button ion-button block (click)="send()">Send</button>

And here is my output when I click in the button:


this is the code from the github repository:

   * @input {any} The value of the option
  get value() {
    if (isPresent(this._value)) {
      return this._value;
    return this.text;
  set value(val: any) {
    this._value = val;

i don’t really know, what isPresent(val) does, but i think it checks if value !== null, so it returns text() which is:
return this._elementRef.nativeElement.textContent;
and not null

here is what isPresent(val) does:
export const isPresent = (val: any) => val !== undefined && val !== null;


Thanks again, @Nexi!

This is the behavior similar to that Angular 2 had until version 2.2.1. When the value was null binding a string like “{0: null}” to the model instead of an actual null object.

But since version 2.2.1 of Angular 2 it is possible to send null value using [ngValue] = “null”.

So I did the post wondering if there was any similar solution using Ionic 2.


Try this and pay attention to the [ngModel]="ok || ''" bit:

  <ion-label>Works with NULL</ion-label>
    [ngModel]="ok || ''"
    <ion-option value="">None</ion-option>
      *ngFor="let thing of things"

I got the solution here and it look like it might fix itself when Ionic bumps past Angular 2.3.


Any updates on this ?
It seems that it is still not possible to do that with angular-ionic@3.3.0.
As per the docs “If ion-option is not given a value attribute then it will use its text as the value”.
So if you set [value]=“null” it will set the model to whatever you set as the ion-option text node element, kinda sad though since it works with a basic select and ngValue.