Skip to content

Home

Jump to bottom
Evgenii Koriakin edited this page Nov 15, 2022 · 52 revisions

FAQ

Why do I get error Can't bind to 'items' since it isn't a known property of 'ionic-selectable'?

The error occurs when IonicSelectableModule isn't imported to your app or page module.

First, check that IonicSelectableModule is imported to your app.module.ts that is normally located in src\app\app.module.ts.

import { IonicSelectableModule } from 'ionic-selectable';

@NgModule({
  imports: [
    IonicSelectableModule
  ]
})
export class AppModule { }

Then if you use Ionic 3+ you might be as well using lazy loaded pages. Check if your pages have a module file, for example, home.module.ts, and if they do then import IonicSelectableModule to each page module too.

import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    IonicSelectableModule
  ]
})
export class HomePageModule { }

What is the best way to handle a large amount of items?

Loading time and responsiveness of the component might get rather slow, when dealing with a lot of items, e.g. a 1000 or more. There are two ways to tackle it.

Async search

In this case no items are loaded and displayed initially. Items will be added while user is typing to search.
See demo.

Infinite scroll

This approach relies on Ionic InfiniteScroll.
Initially only the first bunch of items is loaded and displayed, for example we can show only the first 20 items.
Then more items is loaded bunch by bunch while user is scrolling down.
See demo.

Virtual scroll

This approach relies on Ionic VirtualScroll.
See demo.

Why the component does not appear and only label is visible?

Versions from 2.7.0 to 3.*.* require Ionic item-content attribute. Version 4.*.* doesn't need it.

<ionic-selectable item-content>
</ionic-selectable>

Grouping

Grouping items

Demo

Example

View:

<ion-item>
  <ion-label>Port</ion-label>
  <ionic-selectable
    [(ngModel)]="port"
    itemValueField="id"
    itemTextField="name"
    groupValueField="country.id"
    groupTextField="country.name"
    [items]="ports">
    <ng-template ionicSelectableGroupTemplate let-group="group">
      {{group.text}}
    </ng-template>
  </ionic-selectable>
</ion-item>

Grouping items with VirtualScroll

Demo

Example

View:

<ion-item>
  <ion-label>Port</ion-label>
  <ionic-selectable
    item-content // Required for Ionic 3 only.
    [(ngModel)]="port"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [hasVirtualScroll]="true"
    [virtualScrollHeaderFn]="getGroupText">
  </ionic-selectable>
</ion-item>

TypeScript:

ports: Port[];
port: Port;

constructor(
  private portService: PortService
) {
  this.ports = this.portService.getPorts();
}

getGroupText(port: Port, portIndex: number, ports: Port[]) {
  if (portIndex === 0 || port.country.id !== ports[portIndex - 1].country.id) {
    return port.country.name;
  }

  return null;
}

Editing

Adding, editing and deleting items

Demo

Example

View:

<ion-item>
  <ion-label>Port</ion-label>
  <!--
    Use two-way data binding syntax on [(items)] field for
    a port to be deleted from original array as well.
  -->
  <ionic-selectable
    #portComponent
    item-content // Required for Ionic 3 only.
    [(ngModel)]="port"
    itemValueField="id"
    itemTextField="name"
    [(items)]="ports"
    [canSearch]="true"
    [canClear]="true"
    [canAddItem]="true"
    [canSaveItem]="true"
    [canDeleteItem]="true"
    (onAddItem)="onAddPort($event)"
    (onSaveItem)="onSavePort($event)"
    (onDeleteItem)="onDeletePort($event)">
    <ng-template ionicSelectableItemTemplate let-port="item">
      {{port.name}} ({{port.country.name}})
    </ng-template>
    <ng-template ionicSelectableAddItemTemplate let-port="item"
      let-isAdd="isAdd">
      <form [formGroup]="portForm" novalidate>
        <ion-list>
          <ion-item-divider>
            {{isAdd ? 'Add' : 'Edit'}} Port
          </ion-item-divider>
          <ion-item>
            <ion-label>Name</ion-label>
            <ion-input
              type="text"
              formControlName="portName"
              autocorrect="off"
              autocapitalize="none">
            </ion-input>
          </ion-item>
          <ion-item>
            <ion-label>Country</ion-label>
            <ionic-selectable
              item-content // Required for Ionic 3 only.
              formControlName="portCountry"
              itemValueField="id"
              itemTextField="name"
              [items]="countries">
            </ionic-selectable>
          </ion-item>
        </ion-list>
      </form>
      <ion-footer>
        <ion-toolbar>
          <ion-row>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="portComponent.hideAddItemTemplate()">
                Cancel
              </button>
            </ion-col>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="isAdd ? addPort() : savePort(port)"
                [disabled]="!portForm.valid">
                {{isAdd ? 'Add' : 'Save'}}
              </button>
            </ion-col>
          </ion-row>
        </ion-toolbar>
      </ion-footer>
    </ng-template>
  </ionic-selectable>
</ion-item>

TypeScript:

ports: Port[];
countries: Country[];
port: Port;
portForm: FormGroup;
portNameControl: FormControl;
portCountryControl: FormControl;
@ViewChild('portComponent') portComponent: IonicSelectableComponent;

constructor(
  private portService: PortService,
  private formBuilder: FormBuilder
) {
  this.ports = this.portService.getPorts();
  this.countries = this.portService.getCountries();

  // Create port form that will be used to add or save port.
  this.portNameControl = this.formBuilder.control(null, Validators.required);
  this.portCountryControl = this.formBuilder.control(null, Validators.required);
  this.portForm = this.formBuilder.group({
    portName: this.portNameControl,
    portCountry: this.portCountryControl
  });
}

onAddPort(event: {
  component: IonicSelectableComponent
}) {
  // Clean form.
  this.portNameControl.reset();
  this.portCountryControl.reset();

  // Copy search text to port name field, so
  // user doesn't have to type again.
  this.portNameControl.setValue(event.component.searchText);

  // Show form.
  event.component.showAddItemTemplate();
}

onSavePort(event: {
  component: IonicSelectableComponent,
  item: Port
}) {
  // Fill form.
  this.portNameControl.setValue(event.item.name);
  this.portCountryControl.setValue(event.item.country);

  // Show form.
  event.component.showAddItemTemplate();
}

onDeletePort(event: {
  component: IonicSelectableComponent,
  item: Port
}) {
  // Delete port from storage.
  this.portService.deletePort(event.item);

  // Delete port from list.
  event.component.deleteItem(event.item);
}

addPort() {
  // Create port.
  let port = new Port({
    id: this.portService.getNewPortId(),
    name: this.portNameControl.value,
    country: this.portCountryControl.value
  });

  // Add port to storage.
  this.portService.addPort(port);

  // Add port to the top of list.
  this.portComponent.addItem(port).then(() => {
    this.portComponent.search(port.name);
  });

  // Clean form.
  this.portNameControl.reset();
  this.portCountryControl.reset();

  // Show list.
  this.portComponent.hideAddItemTemplate();
}

savePort(port: Port) {
  // Change port.
  port.name = this.portNameControl.value;
  port.country = this.portCountryControl.value;

  // Show list.
  this.portComponent.hideAddItemTemplate();
}

Adding, editing and deleting items asynchronously

Demo

Example

View:

<ion-item>
  <ion-label>Port</ion-label>
  <!--
    Use two-way data binding syntax on [(items)] field for
    a port to be deleted from original array as well.
  -->
  <ionic-selectable
    #portComponent
    item-content // Required for Ionic 3 only.
    [(ngModel)]="port"
    itemValueField="id"
    itemTextField="name"
    [(items)]="ports"
    [canSearch]="true"
    [canClear]="true"
    [canAddItem]="true"
    [canSaveItem]="true"
    [canDeleteItem]="true"
    (onSearch)="searchPorts($event)"
    (onAddItem)="onAddPort($event)"
    (onSaveItem)="onSavePort($event)"
    (onDeleteItem)="onDeletePort($event)">
    <ng-template ionicSelectableItemTemplate let-port="item">
      {{port.name}} ({{port.country.name}})
    </ng-template>
    <ng-template ionicSelectableAddItemTemplate let-port="item"
      let-isAdd="isAdd">
      <form [formGroup]="portForm" novalidate>
        <ion-list>
          <ion-item-divider>
            {{isAdd ? 'Add' : 'Edit'}} Port
          </ion-item-divider>
          <ion-item>
            <ion-label>Name</ion-label>
            <ion-input
              type="text"
              formControlName="portName"
              autocorrect="off"
              autocapitalize="none">
            </ion-input>
          </ion-item>
          <ion-item>
            <ion-label>Country</ion-label>
            <ionic-selectable
              item-content // Required for Ionic 3 only.
              formControlName="portCountry"
              itemValueField="id"
              itemTextField="name"
              [items]="countries">
            </ionic-selectable>
          </ion-item>
        </ion-list>
      </form>
      <ion-footer>
        <ion-toolbar>
          <ion-row>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="portComponent.hideAddItemTemplate()">
                Cancel
              </button>
            </ion-col>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="isAdd ? addPort() : savePort(port)"
                [disabled]="!portForm.valid">
                {{isAdd ? 'Add' : 'Save'}}
              </button>
            </ion-col>
          </ion-row>
        </ion-toolbar>
      </ion-footer>
    </ng-template>
  </ionic-selectable>
</ion-item>

TypeScript:

ports: Port[];
countries: Country[];
port: Port;
portForm: FormGroup;
portNameControl: FormControl;
portCountryControl: FormControl;
portsSubscription: Subscription;
@ViewChild('portComponent') portComponent: IonicSelectableComponent;

constructor(
  private portService: PortService,
  private formBuilder: FormBuilder
) {
  this.countries = this.portService.getCountries();

  // Create port form that will be used to add or save port.
  this.portNameControl = this.formBuilder.control(null, Validators.required);
  this.portCountryControl = this.formBuilder.control(null, Validators.required);
  this.portForm = this.formBuilder.group({
    portName: this.portNameControl,
    portCountry: this.portCountryControl
  });
}

searchPorts(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  let text = event.text.trim().toLowerCase();
  event.component.startSearch();

  // Close any running subscription.
  if (this.portsSubscription) {
    this.portsSubscription.unsubscribe();
  }

  if (!text) {
    // Close any running subscription.
    if (this.portsSubscription) {
      this.portsSubscription.unsubscribe();
    }

    event.component.items = [];
    event.component.endSearch();
    return;
  }

  this.portsSubscription = this.portService.getPortsAsync().subscribe(ports => {
    // Subscription will be closed when unsubscribed manually.
    if (this.portsSubscription.closed) {
      return;
    }

    event.component.items = this.portService.filterPorts(ports, text);
    event.component.endSearch();
  });
}

onAddPort(event: {
  component: IonicSelectableComponent
}) {
  // Clean form.
  this.portNameControl.reset();
  this.portCountryControl.reset();

  // Copy search text to port name field, so
  // user doesn't have to type again.
  this.portNameControl.setValue(event.component.searchText);

  // Show form.
  event.component.showAddItemTemplate();
}

onSavePort(event: {
  component: IonicSelectableComponent,
  item: Port
}) {
  // Fill form.
  this.portNameControl.setValue(event.item.name);
  this.portCountryControl.setValue(event.item.country);

  // Show form.
  event.component.showAddItemTemplate();
}

onDeletePort(event: {
  component: IonicSelectableComponent,
  item: Port
}) {
  // Show loading while port is being added to storage.
  event.component.showLoading();

  // Delete port from storage.
  this.portService.deletePortAsync(event.item).subscribe(() => {
    // Delete port from list.
    event.component.deleteItem(event.item).then(() => {
      // Hide loading.
      event.component.hideLoading();
    });
  });
}

addPort() {
  // Create port.
  let port = new Port({
    id: this.portService.getNewPortId(),
    name: this.portNameControl.value,
    country: this.portCountryControl.value
  });

  // Show loading while port is being added to storage.
  this.portComponent.showLoading();

  // Add port to storage.
  this.portService.addPortAsync(port).subscribe(() => {
    // Search for added port.
    this.portComponent.search(port.name);

    // Wait for search to complete before showing list.
    this.portsSubscription.add(() => {
      // Show list.
      this.portComponent.hideAddItemTemplate();

      // Clean form.
      this.portNameControl.reset();
      this.portCountryControl.reset();
    });
  });
}

savePort(port: Port) {
  // Show loading while port is being saved to storage.
  this.portComponent.showLoading();

  // Simulate async request.
  setTimeout(() => {
    // Change port.
    port.name = this.portNameControl.value;
    port.country = this.portCountryControl.value;

    // Show list.
    this.portComponent.hideAddItemTemplate();

    // Hide loading.
    this.portComponent.hideLoading();
  }, 1000);
}

Adding item when search fails

Demo

Example

View:

<ion-item>
  <ion-label>Port</ion-label>
  <ionic-selectable
    #portComponent
    item-content // Required for Ionic 3 only.
    [(ngModel)]="port"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [canSearch]="true"
    [canClear]="true"
    (onSearchFail)="onSearchFail($event)"
    (onSearchSuccess)="onSearchSuccess($event)">
    <ng-template ionicSelectableItemTemplate let-port="item">
      {{port.name}} ({{port.country.name}})
    </ng-template>
    <ng-template ionicSelectableAddItemTemplate let-port="item">
      <form [formGroup]="portForm" novalidate>
        <ion-list>
          <ion-item-divider>
            Add Port
          </ion-item-divider>
          <ion-item>
            No ports found. Would you like to add one?
          </ion-item>
          <ion-item>
            <ion-label>Name</ion-label>
            <ion-input
              type="text"
              formControlName="portName"
              autocorrect="off"
              autocapitalize="none">
            </ion-input>
          </ion-item>
          <ion-item>
            <ion-label>Country</ion-label>
            <ionic-selectable
              item-content // Required for Ionic 3 only.
              formControlName="portCountry"
              itemValueField="id"
              itemTextField="name"
              [items]="countries">
            </ionic-selectable>
          </ion-item>
        </ion-list>
      </form>
      <ion-footer>
        <ion-toolbar>
          <ion-row>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="portComponent.hideAddItemTemplate()">
                Cancel
              </button>
            </ion-col>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="addPort()"
                [disabled]="!portForm.valid">
                Add
              </button>
            </ion-col>
          </ion-row>
        </ion-toolbar>
      </ion-footer>
    </ng-template>
  </ionic-selectable>
</ion-item>

TypeScript:

ports: Port[];
countries: Country[];
port: Port;
portForm: FormGroup;
portNameControl: FormControl;
portCountryControl: FormControl;
@ViewChild('portComponent') portComponent: IonicSelectableComponent;

constructor(
  private portService: PortService,
  private formBuilder: FormBuilder
) {
  this.ports = this.portService.getPorts();
  this.countries = this.portService.getCountries();

  // Create port form that will be used to add or save port.
  this.portNameControl = this.formBuilder.control(null, Validators.required);
  this.portCountryControl = this.formBuilder.control(null, Validators.required);
  this.portForm = this.formBuilder.group({
    portName: this.portNameControl,
    portCountry: this.portCountryControl
  });
}

onSearchFail(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  // Clean form.
  this.portNameControl.reset();
  this.portCountryControl.reset();

  // Copy search text to port name field, so
  // user doesn't have to type again.
  this.portNameControl.setValue(event.component.searchText);

  // Show form.
  event.component.showAddItemTemplate();
}

onSearchSuccess(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  // Hide form.
  event.component.hideAddItemTemplate();
}

addPort() {
  // Create port.
  let port = new Port({
    id: this.portService.getNewPortId(),
    name: this.portNameControl.value,
    country: this.portCountryControl.value
  });

  // Add port to storage.
  this.portService.addPort(port);

  // Add port to the top of list.
  this.portComponent.addItem(port).then(() => {
    this.portComponent.search(port.name);
  });

  // Clean form.
  this.portNameControl.reset();
  this.portCountryControl.reset();

  // Show list.
  this.portComponent.hideAddItemTemplate();
}

Adding item asynchronously when search fails

Demo

Example

View:

<ion-item>
  <ion-label>Port</ion-label>
  <ionic-selectable
    #portComponent
    item-content // Required for Ionic 3 only.
    [(ngModel)]="port"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [canSearch]="true"
    [canClear]="true"
    (onSearch)="searchPorts($event)"
    (onSearchFail)="onSearchFail($event)"
    (onSearchSuccess)="onSearchSuccess($event)">
    <ng-template ionicSelectableItemTemplate let-port="item">
      {{port.name}} ({{port.country.name}})
    </ng-template>
    <ng-template ionicSelectableAddItemTemplate let-port="item">
      <form [formGroup]="portForm" novalidate>
        <ion-list>
          <ion-item-divider>
            Add Port
          </ion-item-divider>
          <ion-item>
            No ports found. Would you like to add one?
          </ion-item>
          <ion-item>
            <ion-label>Name</ion-label>
            <ion-input
              type="text"
              formControlName="portName"
              autocorrect="off"
              autocapitalize="none">
            </ion-input>
          </ion-item>
          <ion-item>
            <ion-label>Country</ion-label>
            <ionic-selectable
              item-content // Required for Ionic 3 only.
              formControlName="portCountry"
              itemValueField="id"
              itemTextField="name"
              [items]="countries">
            </ionic-selectable>
          </ion-item>
        </ion-list>
      </form>
      <ion-footer>
        <ion-toolbar>
          <ion-row>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="portComponent.hideAddItemTemplate()">
                Cancel
              </button>
            </ion-col>
            <ion-col col-6>
              <button ion-button full no-margin
                (click)="addPort()"
                [disabled]="!portForm.valid">
                Add
              </button>
            </ion-col>
          </ion-row>
        </ion-toolbar>
      </ion-footer>
    </ng-template>
  </ionic-selectable>
</ion-item>

TypeScript:

ports: Port[];
countries: Country[];
port: Port;
portForm: FormGroup;
portNameControl: FormControl;
portCountryControl: FormControl;
portsSubscription: Subscription;
@ViewChild('portComponent') portComponent: IonicSelectableComponent;

constructor(
  private portService: PortService,
  private formBuilder: FormBuilder
) {
  this.ports = this.portService.getPorts();
  this.countries = this.portService.getCountries();

  // Create port form that will be used to add or save port.
  this.portNameControl = this.formBuilder.control(null, Validators.required);
  this.portCountryControl = this.formBuilder.control(null, Validators.required);
  this.portForm = this.formBuilder.group({
    portName: this.portNameControl,
    portCountry: this.portCountryControl
  });
}

searchPorts(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  let text = event.text.trim().toLowerCase();
  event.component.startSearch();

  // Close any running subscription.
  if (this.portsSubscription) {
    this.portsSubscription.unsubscribe();
  }

  if (!text) {
    // Close any running subscription.
    if (this.portsSubscription) {
      this.portsSubscription.unsubscribe();
    }

    event.component.items = [];
    event.component.endSearch();
    return;
  }

  this.portsSubscription = this.portService.getPortsAsync().subscribe(ports => {
    // Subscription will be closed when unsubscribed manually.
    if (this.portsSubscription.closed) {
      return;
    }

    event.component.items = this.portService.filterPorts(ports, text);
    event.component.endSearch();
  });
}

onSearchFail(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  if (event.component.hasSearchText) {
    // Clean form.
    this.portNameControl.reset();
    this.portCountryControl.reset();

    // Copy search text to port name field, so
    // user doesn't have to type again.
    this.portNameControl.setValue(event.component.searchText);

    // Show form.
    event.component.showAddItemTemplate();
  }
}

onSearchSuccess(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  // Hide form.
  event.component.hideAddItemTemplate();
}

addPort() {
  // Create port.
  let port = new Port({
    id: this.portService.getNewPortId(),
    name: this.portNameControl.value,
    country: this.portCountryControl.value
  });

  // Show loading while port is being added to storage.
  this.portComponent.showLoading();

  // Add port to storage.
  this.portService.addPortAsync(port).subscribe(() => {
    // Search for added port.
    this.portComponent.search(port.name);

    // Wait for search to complete before showing list.
    this.portsSubscription.add(() => {
      // Show list.
      this.portComponent.hideAddItemTemplate();

      // Clean form.
      this.portNameControl.reset();
      this.portCountryControl.reset();
    });
  });
}

Templates

Add item template

Version added: 3.0.1, 4.0.0

A template to add item.

Demo and example

Close button template

Version added: 3.0.1, 4.0.0

A template to render Close button.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableCloseButtonTemplate>
    <ion-icon name="close-circle" style="font-size: 24px;"></ion-icon>
  </ng-template>
</ionic-selectable>

Footer template

Version added: 3.3.0, 4.3.0

A template to render footer.

Demo

Example

View:

<ionic-selectable #portComponent [(ngModel)]="port"
  itemValueField="id" itemTextField="name" [items]="ports"
  [isMultiple]="true">
  <ng-template ionicSelectableFooterTemplate>
    <ion-toolbar>
      <ion-row>
        <ion-col>
          <button ion-button full (click)="toggleItems()">
            {{portComponent.itemsToConfirm.length ? 'Deselect' : 'Select'}}
            All
          </button>
        </ion-col>
        <ion-col>
          <button ion-button full (click)="confirm()">
            {{portComponent.confirmButtonText}}
          </button>
        </ion-col>
      </ion-row>
    </ion-toolbar>
  </ng-template>
</ionic-selectable>

TypeScript:

ports: Port[];
port: Port;
@ViewChild('portComponent') portComponent: IonicSelectableComponent;

constructor(
  private portService: PortService
) { }

ngOnInit() {
  this.ports = this.portService.getPorts();
}

toggleItems() {
  this.portComponent.toggleItems(this.portComponent.itemsToConfirm.length ? false : true);
  this.confirm();
}

confirm() {
  this.portComponent.confirm();
  this.portComponent.close();
}

Group template

Version added: 3.0.1, 4.0.0

A template to render groups.

Parameters

group: { value: any, text?: any, items: any[] }
A group, where value is defined by groupValueField and text is defined by groupTextField.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableGroupTemplate let-group="group">
    {{group.text}}
  </ng-template>
</ionic-selectable>

Group end template

Version added: 3.0.1, 4.0.0

A template to render group end.

Parameters

group: { value: any, text?: any, items: any[] }
A group, where value is defined by groupValueField and text is defined by groupTextField.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableGroupEndTemplate let-group="group">
    <img class="country-flag" [src]="group.items[0].country.flagUrl" />
  </ng-template>
</ionic-selectable>

Header template

Version added: 3.4.0, 4.4.0

A template to render header.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableHeaderTemplate>
    <ion-navbar>
      <ion-buttons>
        <button ion-button (click)="portComponent.close()">
          {{portComponent.closeButtonText}}
        </button>
      </ion-buttons>
      <ion-title>
        {{portComponent.label}}
      </ion-title>
    </ion-navbar>
  </ng-template>
</ionic-selectable>

Icon template

Version added: 3.5.0, 4.6.0

A template to render icon.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableIconTemplate>
    <ion-icon name="add-circle"></ion-icon>
  </ng-template>
</ionic-selectable>

Item template

Version added: 3.0.1, 4.0.0

A template to render items.

Parameters

item: any
Item.

isItemSelected: boolean
Determines whether item is selected.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableItemTemplate let-port="item"
    let-isPortSelected="isItemSelected">
    {{port.name}} ({{port.country.name}})
  </ng-template>
</ionic-selectable>

Item end template

Version added: 3.0.1, 4.0.0

A template to render item end.

Parameters

item: any
Item.

isItemSelected: boolean
Determines whether item is selected.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableItemEndTemplate let-port="item"
    let-isPortSelected="isItemSelected">
    {{port.name}} ({{port.country.name}})
  </ng-template>
</ionic-selectable>

Item icon template

Version added: 3.4.0, 4.4.0

A template to render item icon.

Parameters

item: any
Item.

isItemSelected: boolean
Determines whether item is selected.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableItemIconTemplate let-port="item"
    let-isPortSelected="isItemSelected">
    <ion-icon
      [name]="isPortSelected ? 'checkmark-circle' : 'radio-button-off'"
      [color]="isPortSelected ? 'primary' : null">
    </ion-icon>
  </ng-template>
</ionic-selectable>

Message template

Version added: 3.0.1, 4.0.0

A template to render message.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableMessageTemplate>
    Select port.
  </ng-template>
</ionic-selectable>

Multiple values template

Version added: 3.0.1, 4.0.0

A template to render multiple values.

Demo

Example

View:

<ionic-selectable [isMultiple]="true">
  <ng-template ionicSelectableValueTemplate let-ports="value">
    <div class="ionic-selectable-value-item" *ngFor="let port of ports">
      {{port.name}} ({{port.country.name}})
    </div>
  </ng-template>
</ionic-selectable>

Multiple values with ellipsis template

Version added: 3.0.1, 4.0.0

Demo

Example

View:

<ionic-selectable [isMultiple]="true">
  <ng-template ionicSelectableValueTemplate let-ports="value">
    <div class="ionic-selectable-value-item">
      {{formatPorts(ports)}}
    </div>
  </ng-template>
</ionic-selectable>

TypeScript:

formatPorts(ports: Port[]) {
  return ports.map(port => port.name).join(', ');
}

Placeholder template

Version added: 3.0.1, 4.0.0

A template to render placeholder.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectablePlaceholderTemplate>
    Port <span style="color: black;">(Dry)</span>
  </ng-template>
</ionic-selectable>

Search fail template

Version added: 3.0.1, 4.0.0

A template to render text when no items have been found.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableSearchFailTemplate>
    <div padding>
      No ports found.
    </div>
  </ng-template>
</ionic-selectable>

Title template

Version added: 3.0.1, 4.0.0

A template to render title.
Note: If title template is not set, title will be taken from ion-label.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableTitleTemplate>
    Port <span style="color: gray;">(Dry)</span>
  </ng-template>
</ionic-selectable>

Value template

Version added: 3.0.1, 4.0.0

A template to render value.

Demo

Example

View:

<ionic-selectable>
  <ng-template ionicSelectableValueTemplate let-port="value">
    {{port.name}} ({{port.country.name}})
  </ng-template>
</ionic-selectable>

Forms

FormControl

Demo and example

Min/max selection

Demo

Example

View:

<form [formGroup]="form" margin-bottom>
  <ion-item>
    <ion-label>Port</ion-label>
    <ionic-selectable
      #portComponent
      item-content // Required for Ionic 3 only.
      formControlName="ports"
      itemValueField="id"
      itemTextField="name"
      [items]="ports"
      [canClear]="true"
      [isMultiple]="true"
      [isConfirmButtonEnabled]="portComponent.itemsToConfirm.length >= 1 && portComponent.itemsToConfirm.length <= 3">
      <ng-template ionicSelectableMessageTemplate>
        Select between 1 to 3 items.
      </ng-template>
    </ionic-selectable>
  </ion-item>
  <ion-item>
    <ion-badge color="danger" *ngIf="!form.valid">Invalid</ion-badge>
    <ion-badge color="secondary" *ngIf="form.valid">Valid</ion-badge>
    <button ion-button item-right (click)="reset()" [disabled]="!form.valid">
      Reset
    </button>
  </ion-item>
</form>

TypeScript:

ports: Port[];
port: Port;

constructor(
  private portService: PortService
) {
  this.ports = this.portService.getPorts();
}

Fields

addButtonText

Version added: 3.0.1, 4.0.0

Add button text.

Type

string = 'Add'

Example

View:

<ionic-selectable
  addButtonText="Create">
</ionic-selectable>

canAddItem

Version added: 3.0.1, 4.0.0

Determines whether to allow adding items.

Type

boolean = false

Demo and example

canClear

Version added: 3.0.1, 4.0.0

Determines whether to show Clear button.

Type

boolean = false

Demo

Example

View:

<ionic-selectable
  [canClear]="true">
</ionic-selectable>

canDeleteItem

Version added: 3.0.1, 4.0.0

Determines whether to allow deleting items.

Type

boolean = false

Demo and example

canSaveItem

Version added: 3.0.1, 4.0.0

Determines whether to allow editing items.

Type

boolean = false

Demo and example

canSearch

Version added: 3.0.1, 4.0.0

Determines whether to show Searchbar.

Type

boolean = false

Example

View:

<ionic-selectable
  [canSearch]="true">
</ionic-selectable>

clearButtonText

Version added: 3.0.1, 4.0.0

Clear button text.

Type

string = 'Clear'

Example

View:

<ionic-selectable
  clearButtonText="Clear">
</ionic-selectable>

closeButtonText

Version added: 3.0.1, 4.0.0

Close button text.

Type

string = 'Cancel'

Demo

Example

View:

<ionic-selectable
  closeButtonText="Close">
</ionic-selectable>

closeButtonSlot

Version added: 4.4.0

Close button slot.
Ionic slots are supported.

Type

string = 'start'

Example

View:

<ionic-selectable
  closeButtonSlot="end">
</ionic-selectable>

confirmButtonText

Version added: 3.0.1, 4.0.0

Confirm button text.

Type

string = 'OK'

Example

View:

<ionic-selectable
  confirmButtonText="Select">
</ionic-selectable>

disabledItems

Version added: 3.0.1, 4.0.0

A list of items to disable.

Type

Array = []

Demo

Example

View:

<ion-item>
  <ion-label>Loading Ports</ion-label>
  <ionic-selectable
    item-content // Required for Ionic 3 only.
    [(ngModel)]="loadingPorts"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [canClear]="true"
    [isMultiple]="true"
    (onChange)="loadingPortChange($event)"
    [disabledItems]="disabledLoadingPorts">
  </ionic-selectable>
</ion-item>
<ion-item>
  <ion-label>Discharging Ports</ion-label>
  <ionic-selectable
    item-content // Required for Ionic 3 only.
    [(ngModel)]="dischargingPorts"
    itemValueField="id"
    itemTextField="name"
    [items]="ports"
    [canClear]="true"
    [isMultiple]="true"
    (onChange)="dischargingPortChange($event)"
    [disabledItems]="disabledDischargingPorts">
  </ionic-selectable>
</ion-item>

TypeScript:

ports: Port[];
loadingPorts: Port[] = [];
dischargingPorts: Port[] = [];
disabledLoadingPorts: Port[] = [];
disabledDischargingPorts: Port[] = [];

constructor(
  private portService: PortService
) {
  this.ports = this.portService.getPorts();
}

loadingPortChange(event: {
  component: IonicSelectableComponent,
  value: any
}) {
  this.disabledDischargingPorts = this.loadingPorts;
}

dischargingPortChange(event: {
  component: IonicSelectableComponent,
  value: any
}) {
  this.disabledLoadingPorts = this.dischargingPorts;
}

groupColor

Version added: 3.0.1, 4.0.0

Group color. Ionic colors are supported.

Type

string = null

Example

View:

<ionic-selectable
  groupColor="primary">
</ionic-selectable>

groupValueField

Version added: 3.0.1, 4.0.0

Group property to use as a unique identifier to group items, e.g. 'country.id'.
Note: items should be an object array.

Type

string = null

Demo

Example

View:

<ionic-selectable
  groupValueField="country.id">
</ionic-selectable>

groupTextField

Version added: 3.0.1, 4.0.0

Group property to display, e.g. 'country.name'.
Note: items should be an object array.

Type

string = null

Demo

Example

View:

<ionic-selectable
  groupTextField="country.name">
</ionic-selectable>

hasInfiniteScroll

Version added: 3.0.1, 4.0.0

Determines whether Ionic InfiniteScroll is enabled.
Note: Infinite scroll cannot be used together with virtual scroll.

Type

boolean = false

Demo

Example

See onInfiniteScroll event.

hasConfirmButton

Version added: 3.2.0, 4.2.0

Determines whether Confirm button is visible for single selection.
By default Confirm button is visible only for multiple selection.
Note: It is always true for multiple selection and cannot be changed.

Type

boolean = false

Example

View:

<ionic-selectable
  [hasConfirmButton]="true">
</ionic-selectable>

hasSearchText

Version added: 3.0.1, 4.0.0

Determines whether user has typed anything in Searchbar.

Type

boolean = false

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

let hasSearchText = this.portComponent.hasSearchText;

hasVirtualScroll

Version added: 3.0.1, 4.0.0

Determines whether Ionic VirtualScroll is enabled.
Note: Virtual scroll cannot be used together with infinite scroll.

Type

boolean = false

Demo

Example

View:

<ionic-selectable
  [hasVirtualScroll]="true">
</ionic-selectable>

headerColor

Version added: 3.0.1, 4.0.0

Header color. Ionic colors are supported.

Type

string = null

Example

View:

<ionic-selectable
  headerColor="primary">
</ionic-selectable>

itemIconSlot

Version added: 4.4.0

Item icon slot.
Ionic slots are supported.

Type

string = 'start'

Example

View:

<ionic-selectable
  itemIconSlot="end">
</ionic-selectable>

items

Version added: 3.0.1, 4.0.0

A list of items.

Type

Array = []

Example

View:

<ionic-selectable
  [items]="ports">
</ionic-selectable>

TypeScript:

ports: Port[] = [];

constructor() {
  this.ports = [
    { id: 1, name: 'Tokai', country: 'Japan' },
    { id: 2, name: 'Vladivostok', country: 'Russia' }
  ];
}

itemsToConfirm

Version added: 3.0.1, 4.0.0

A list of items that are selected and awaiting confirmation by user, when he has clicked Confirm button.
After the user has clicked Confirm button items to confirm are cleared.
Note: isMultiple has to be enabled.

Type

Array = []

Example

View:

<ionic-selectable
  #portComponent
  [isMultiple]="true"
  [items]="ports">
</ionic-selectable>
<div>
  Items to confirm: {{portComponent.itemsToConfirm.length}}
</div>

isEnabled

Version added: 3.0.1, 4.0.0

Determines whether the component is enabled.

Type

boolean = true

Demo

Example

View:

<ionic-selectable
  [isEnabled]="false">
</ionic-selectable>

isMultiple

Version added: 3.0.1, 4.0.0

Determines whether multiple items can be selected.

Type

boolean = false

Demo

Example

View:

<ionic-selectable
  [isMultiple]="true">
</ionic-selectable>

isConfirmButtonEnabled

Version added: 3.0.1, 4.0.0

Determines whether Confirm button is enabled.

Type

boolean = true

Example

View:

<ionic-selectable
  [isConfirmButtonEnabled]="false">
</ionic-selectable>

isOnSearchEnabled

Version added: 3.0.1, 4.0.0

Determines whether onSearch event is enabled.

Type

boolean = true

Example

View:

<ionic-selectable
  [isOnSearchEnabled]="false">
</ionic-selectable>

isOpened

Version added: 3.0.1, 4.0.0

Determines whether Modal is opened.

Type

boolean = false

Example

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

let isOpened = this.portComponent.isOpened;

isSearching

Version added: 3.0.1, 4.0.0

Determines whether search is running.

Type

boolean = false

Example

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

let isSearching = this.portComponent.isSearching;

itemValueField

Version added: 3.0.1, 4.0.0

Item property to use as a unique identifier, e.g, 'id'.
Note: items should be an object array.

Type

string = null

Example

View:

<ionic-selectable
  itemValueField="id">
</ionic-selectable>

itemTextField

Version added: 3.0.1, 4.0.0

Item property to display, e.g, 'name'.
Note: items should be an object array.

Type

string = null

Example

View:

<ionic-selectable
  itemTextField="name">
</ionic-selectable>

label

Version added: 3.4.0, 4.4.0

Text of Ionic Label.

Type

string = null

Example

View:

<ionic-selectable>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

get label(): string {
  return this.portComponent.label;
}

modalCssClass

Version added: 3.4.0, 4.4.0

Modal CSS class.
See Ionic Modal.

Type

string = null

Example

View:

<ionic-selectable
  modalCssClass="modal">
</ionic-selectable>

modalEnterAnimation

Version added: 3.4.0, 4.4.0

Modal enter animation.
See Ionic Modal.

Type

AnimationBuilder = null

modalLeaveAnimation

Version added: 3.4.0, 4.4.0

Modal leave animation.
See Ionic Modal.

Type

AnimationBuilder = null

placeholder

Version added: 3.0.1, 4.0.0

A placeholder.

Type

string = null

Demo

Example

View:

<ionic-selectable
  placeholder="Port">
</ionic-selectable>

searchDebounce

Version added: 3.0.1, 4.0.0

How long, in milliseconds, to wait to filter items or to trigger onSearch event after each keystroke.

Type

number = 250

Example

View:

<ionic-selectable
  [searchDebounce]="1000">
</ionic-selectable>

searchFailText

Version added: 3.0.1, 4.0.0

Text to display when no items have been found during search.

Type

string = 'No items found.'

Example

View:

<ionic-selectable
  [searchFailText]="'No ports found.'">
</ionic-selectable>

searchPlaceholder

Version added: 3.0.1, 4.0.0

A placeholder for Searchbar.

Type

string = 'Search'

Example

View:

<ionic-selectable
  searchPlaceholder="Enter port name">
</ionic-selectable>

searchText

Version added: get: 3.0.1, 4.0.0, set: 3.2.0, 4.2.0

Text that the user has typed in Searchbar.

Type

string = ''

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

let searchText = this.portComponent.searchText;

shouldBackdropClose

Version added: 3.2.0, 4.2.0

Determines whether Modal should be closed when backdrop is clicked.

Type

boolean = true

Example

View:

<ionic-selectable
  [shouldBackdropClose]="false">
</ionic-selectable>

shouldFocusSearchbar

Version added: 3.0.1, 4.0.0

Determines whether Searchbar should receive focus when Modal is opened.

Type

boolean = false

Example

View:

<ionic-selectable
  [shouldFocusSearchbar]="true">
</ionic-selectable>

shouldStoreItemValue

Version added: 3.0.1, 4.0.0

Determines whether item value only should be stored in ngModel, not the entire item.
Note: Item value is defined by itemValueField.

Type

boolean = false

Demo

Example

View:

<ionic-selectable
  [shouldStoreItemValue]="true">
</ionic-selectable>

virtualScrollApproxItemHeight

Version added: 3.0.1, 4.0.0

See Ionic VirtualScroll approxItemHeight.

Type

string = '40px'

Example

View:

<ionic-selectable
  virtualScrollApproxItemHeight="100px">
</ionic-selectable>

virtualScrollHeaderFn

Version added: 3.0.1, 4.0.0

See Ionic VirtualScroll headerFn.

Type

Function

Demo and example

Methods

addItem()

Version added: 3.0.1, 4.0.0

Adds item.
Note: If you want an item to be added to the original array as well use two-way data binding syntax on [(items)] field.

Parameters

item: any
Item to add.

Returns

Promise<void>
Promise that resolves when item has been added.

Demo and example

clear()

Version added: 3.0.1, 4.0.0

Clears value.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

clear() {
  this.portComponent.clear();
}

close()

Version added: 3.0.1, 4.0.0

Closes Modal.

Returns

Promise<void>
Promise that resolves when Modal has been closed.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

close() {
  this.portComponent.close();
}

confirm()

Version added: 3.3.0, 4.3.0

Confirms selected items by updating value.

Demo

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

confirm() {
  this.portComponent.confirm();
}

deleteItem()

Version added: 3.0.1, 4.0.0

Deletes item.
Note: If you want an item to be deleted from the original array as well use two-way data binding syntax on [(items)] field.

Parameters

item: any
Item to delete.

Returns

Promise<void>
Promise that resolves when item has been deleted.

Demo and example

disableInfiniteScroll()

Version added: 3.0.1, 4.0.0

Disables infinite scroll.

Demo

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

close() {
  this.portComponent.disableInfiniteScroll();
}

enableInfiniteScroll()

Version added: 3.0.1, 4.0.0

Enables infinite scroll.

Demo

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

close() {
  this.portComponent.enableInfiniteScroll();
}

endInfiniteScroll()

Version added: 3.0.1, 4.0.0

Ends infinite scroll.

Demo

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

close() {
  this.portComponent.endInfiniteScroll();
}

endSearch()

Version added: 3.0.1, 4.0.0

Ends search process by hiding Loading spinner and refreshing items.
Use it together with onSearch event to indicate search end.

Demo

Example

View:

<ionic-selectable
  (onSearch)="searchPorts($event)">
</ionic-selectable>

TypeScript:

searchPorts(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  event.component.startSearch();

  // Get ports from a storage and stop searching.
  event.component.endSearch();
}

hasValue()

Version added: 3.0.1, 4.0.0

Determines whether any item has been selected.

Returns

boolean A boolean determining whether any item has been selected.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

hasValue() {
  this.portComponent.hasValue();
}

hideAddItemTemplate()

Version added: 3.0.1, 4.0.0

Hides ionicSelectableAddItemTemplate.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

hideAddItemTemplate() {
  this.portComponent.hideAddItemTemplate();
}

hideLoading()

Version added: 3.0.1, 4.0.0

Hides Loading spinner.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

hideLoading() {
  this.portComponent.hideLoading();
}

open()

Version added: 3.0.1, 4.0.0

Opens Modal.

Returns

Promise<void>
Promise that resolves when Modal has been opened.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

open() {
  this.portComponent.open();
}

search()

Version added: 3.0.1, 4.0.0

Triggers search of items.
Note: canSearch has to be enabled.

Parameters

text: string
Text to search items by.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

search(text: string) {
  this.portComponent.search(text);
}

scrollToBottom()

Version added: 3.0.1, 4.0.0

Scrolls to the bottom of Modal content.

Returns

Promise<void>
Promise that resolves when scroll has been completed.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

scrollToBottom() {
  this.portComponent.scrollToBottom();
}

scrollToTop()

Version added: 3.0.1, 4.0.0

Scrolls to the top of Modal content.

Returns

Promise<void>
Promise that resolves when scroll has been completed.

Demo

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

scrollToTop() {
  this.portComponent.scrollToTop();
}

showAddItemTemplate()

Version added: 3.0.1, 4.0.0

Shows ionicSelectableAddItemTemplate.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

showAddItemTemplate() {
  this.portComponent.showAddItemTemplate();
}

showLoading()

Version added: 3.0.1, 4.0.0

Shows Loading spinner.

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

showLoading() {
  this.portComponent.showLoading();
}

startSearch()

Version added: 3.0.1, 4.0.0

Starts search process by showing Loading spinner.
Use it together with onSearch event to indicate search start.

Demo

Example

View:

<ionic-selectable
  (onSearch)="searchPorts($event)">
</ionic-selectable>

TypeScript:

searchPorts(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  event.component.startSearch();

  // Get ports from a storage and stop searching.
  event.component.endSearch();
}

toggleItems()

Version added: 3.3.0, 4.3.0

Selects or deselects all or specific items.

Demo

Example

View:

<ionic-selectable
  #portComponent>
</ionic-selectable>

TypeScript:

@ViewChild('portComponent') portComponent: IonicSelectableComponent;

toggleItems(isSelect: boolean) {
  this.portComponent.toggleItems(isSelect);
}

Events

onAddItem

Version added: 3.0.1, 4.0.0

Fires when Add item button has been clicked.
When the button has been clicked ionicSelectableAddItemTemplate will be shown. Use the template to create a form to add item.
Note: canAddItem has to be enabled.

Type

EventEmitter<{ component: IonicSelectableComponent }>

Demo and example

onDeleteItem

Version added: 3.0.1, 4.0.0

Fires when Delete item button has been clicked.
Note: canDeleteItem has to be enabled.

Type

EventEmitter<{ component: IonicSelectableComponent, item: any }>

Demo and example

onChange

Version added: 3.0.1, 4.0.0

Fires when item/s has been selected and Modal closed.

Type

EventEmitter<{ component: IonicSelectableComponent, value: any }>

Example

View:

<ionic-selectable
  (onChange)="portChange($event)">
</ionic-selectable>

TypeScript:

portChange(event: {
  component: IonicSelectableComponent,
  value: any
}) {
  let port = event.value;
}

onClear

Version added: 3.2.0, 4.2.0

Fires when Clear button has been clicked.

Type

EventEmitter<{ component: IonicSelectableComponent, items: any[] }>

Example

View:

<ionic-selectable
  (onClear)="onClear($event)">
</ionic-selectable>

TypeScript:

onClear(event: {
  component: IonicSelectableComponent,
  items: any[]
}) {

}

onClose

Version added: 3.0.1, 4.0.0

Fires when Modal has been closed.

Type

EventEmitter<{ component: IonicSelectableComponent }>

Example

View:

<ionic-selectable
  (onClose)="onClose($event)">
</ionic-selectable>

TypeScript:

onClose(event: { component: IonicSelectableComponent }) {

}

onInfiniteScroll

Version added: 3.0.1, 4.0.0

Fires when the user has scrolled to the end of the list.
Note: hasInfiniteScroll has to be enabled.

Type

EventEmitter<{ component: IonicSelectableComponent, text: string }>

Demo

onOpen

Version added: 3.0.1, 4.0.0

Fires when Modal has been opened.

Type

EventEmitter<{ component: IonicSelectableComponent }>

Example

View:

<ionic-selectable
  (onOpen)="onOpen($event)">
</ionic-selectable>

TypeScript:

onOpen(event: { component: IonicSelectableComponent }) {

}

onSaveItem

Version added: 3.0.1, 4.0.0

Fires when Edit item button has been clicked.
When the button has been clicked ionicSelectableAddItemTemplate will be shown. Use the template to create a form to edit item.
Note: canSaveItem has to be enabled.

Type

EventEmitter<{ component: IonicSelectableComponent, item: any }>

Demo and example

onSearch

Version added: 3.0.1, 4.0.0

Fires when the user is typing in Searchbar.
Note: canSearch and isOnSearchEnabled has to be enabled.

Type

EventEmitter<{ component: IonicSelectableComponent, text: string }>

Demo

Example

View:

<ionic-selectable
  (onSearch)="searchPorts($event)">
</ionic-selectable>

TypeScript:

searchPorts(event: {
  component: IonicSelectableComponent,
  text: string
}) {
  let portName = event.text;
  event.component.startSearch();

  // Assume that we already have some PortService that return ports
  // filtered by name from our server.
  this.portService.getPorts(portName).subscribe(ports => {
    event.component.items = ports;

    // Get ports from a storage and stop searching.
    event.component.endSearch();
  });
}

onSearchFail

Version added: 3.0.1, 4.0.0

Fires when no items have been found.

Type

EventEmitter<{ component: IonicSelectableComponent, text: string }>

Example

View:

<ionic-selectable
  (onSearchFail)="onSearchFail($event)">
</ionic-selectable>

TypeScript:

onSearchFail(event: {
  component: IonicSelectableComponent,
  text: string
}) {

}

onSearchSuccess

Version added: 3.0.1, 4.0.0

Fires when some items have been found.

Type

EventEmitter<{ component: IonicSelectableComponent, text: string }>

Example

View:

<ionic-selectable
  (onSearchSuccess)="onSearchSuccess($event)">
</ionic-selectable>

TypeScript:

onSearchSuccess(event: {
  component: IonicSelectableComponent,
  text: string
}) {

}

onSelect

Version added: 3.2.0, 4.2.0

Fires when an item has been selected or unselected.

Type

EventEmitter<{ component: IonicSelectableComponent, item: any, isSelected: boolean }>

Example

View:

<ionic-selectable
  (onSelect)="onSelect($event)">
</ionic-selectable>

TypeScript:

onSelect(event: {
  component: IonicSelectableComponent,
  item: any,
  isSelected: boolean
}) {

}

Theming

Select CSS modifiers

  • ionic-selectable-ios
  • ionic-selectable-md
  • ionic-selectable-is-multiple
  • ionic-selectable-can-clear
  • ionic-selectable-is-enabled
  • ionic-selectable-has-value
  • ionic-selectable-has-placeholder

Modal CSS modifiers

  • ionic-selectable-modal-ios
  • ionic-selectable-modal-md
  • ionic-selectable-modal-is-multiple
  • ionic-selectable-modal-can-clear
  • ionic-selectable-modal-is-searching
  • ionic-selectable-modal-is-add-item-template-visible

Item CSS modifiers

  • ionic-selectable-item-is-selected
  • ionic-selectable-item-is-disabled

Errors

IonicSelectable is disabled or already closed

ERROR Error: Uncaught (in promise): IonicSelectable is disabled or already closed.

The error occurs when close() method is invoked while component is disabled or closed.
Note: Ionic will only throw the error in development mode when running application with ionic serve.

Solution

The error can be ignored as it will not happen in production mode. However, you can still prevent it by using catch

this.portComponent.close().catch(() => { });

or by checking isEnabled and isOpened fields.

if (this.portComponent.isEnabled && this.portComponent.isOpened) {
  this.portComponent.close();
}

IonicSelectable is disabled or already opened

ERROR Error: Uncaught (in promise): IonicSelectable is disabled or already opened.

The error occurs when open() method is invoked while component is disabled or opened.
Note: Ionic will only throw the error in development mode when running application with ionic serve.

Solution

The error can be ignored as it will not happen in production mode. However, you can still prevent it by usingcatch

this.portComponent.open().catch(() => { });

or by checking isEnabled and isOpened fields.

if (this.portComponent.isEnabled && !this.portComponent.isOpened) {
  this.portComponent.open();
}

IonicSelectable content cannot be scrolled

ERROR Error: Uncaught (in promise): IonicSelectable content cannot be scrolled.

The error occurs when scrollToTop() or scrollToBottom() method is invoked while component is not opened.
Note: Ionic will only throw the error in development mode when running application with ionic serve.

Solution

The error can be ignored as it will not happen in production mode. However, you can still prevent it by adding catch

this.portComponent.scrollToTop().catch(() => { });

or by checking isOpened field.

if (this.portComponent.isOpened) {
  this.portComponent.scrollToTop();
}
Clone this wiki locally