Home

Wiki Disclaimer

• Original Wiki was referenced from Ionic-Selectable, a mix of new notes are implemented throughout to account for changes in Ionic-Selectable.

Continued..

• FAQ
  • Why do I get error Can't bind to 'items' since it isn't a known property of 'ionic-selectable'?
  • What is the best way to handle a large amount of items?
  • Why the component does not appear and only label is visible?
• Use cases
  • Basic
  • Cascading
  • Customizing footer buttons
  • Disabling items
  • Firebase
  • Inside modal
  • Initial value
  • Infinite scroll
  • Ionic labels
  • Primitive types
  • Search items asynchronously
  • Search by several item fields
  • Virtual scroll
• Grouping
  • Grouping items
  • Grouping items with VirtualScroll
• Editing
  • Adding, editing and deleting items
  • Adding, editing and deleting items asynchronously
  • Adding item when search fails
  • Adding item asynchronously when search fails
• Templates
  • Add item template
  • Close button template
  • Footer template
  • Group template
  • Group end template
  • Header template
  • Icon template
  • Item template
  • Item end template
  • Item icon template
  • Message template
  • Multiple values template
  • Multiple values with ellipsis template
  • Placeholder template
  • Search fail template
  • Title template
  • Value template
• Forms
  • FormArray
  • FormControl
  • Min/max selection
• Fields
  • addButtonText
  • autoSearch
  • canAddItem
  • canClear
  • canDeleteItem
  • canSaveItem
  • canSearch
  • clearButtonText
  • closeButtonText
  • closeButtonSlot
  • confirmButtonText
  • disabledItems
  • groupColor
  • groupValueField
  • groupTextField
  • hasInfiniteScroll
  • hasConfirmButton
  • hasSearchText
  • hasVirtualScroll
  • headerColor
  • itemIconSlot
  • items
  • itemsToConfirm
  • isEnabled
  • isMultiple
  • isConfirmButtonEnabled
  • isOnSearchEnabled
  • isOpened
  • isSearching
  • itemValueField
  • itemTextField
  • label
  • modalCssClass
  • modalEnterAnimation
  • modalLeaveAnimation
  • placeholder
  • searchDebounce
  • searchFailText
  • searchPlaceholder
  • searchText
  • shouldBackdropClose
  • shouldFocusSearchbar
  • shouldStoreItemValue
  • virtualScrollApproxItemHeight
  • virtualScrollHeaderFn
• Methods
  • addItem()
  • clear()
  • close()
  • confirm()
  • deleteItem()
  • disableInfiniteScroll()
  • enableInfiniteScroll()
  • endInfiniteScroll()
  • endSearch()
  • hasValue()
  • hideAddItemTemplate()
  • hideLoading()
  • open()
  • search()
  • scrollToBottom()
  • scrollToTop()
  • showAddItemTemplate()
  • showLoading()
  • startSearch()
  • toggleItems()
• Events
  • onAddItem
  • onDeleteItem
  • onChange
  • onClear
  • onClose
  • onInfiniteScroll
  • onOpen
  • onSaveItem
  • onSearch
  • onSearchFail
  • onSearchSuccess
  • onSelect
• Theming
• Errors
  • IonicSelectable is disabled or already closed
  • IonicSelectable is disabled or already opened
  • IonicSelectable content cannot be scrolled

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

• Grouping items

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

• Grouping items with VirtualScroll

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

• Adding, editing and deleting items

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

• Adding, editing and deleting items asynchronously

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

• Adding item when search fails

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

• Adding item asynchronously when search fails

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

• See Adding, editing and deleting items

Close button template

Version added: 3.0.1, 4.0.0

A template to render Close button.

Demo

• Close button template

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

• Footer template

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

• Group template

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

• Group end template

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

• Header template

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

• Icon template

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

• Item template

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

• Item end template

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

• Item icon template

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

• Message template

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

• Multiple values template

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

• Multiple values with ellipsis template

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

• Placeholder template

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

• Search fail template

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

• Title template

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

• Value template

Example

View:

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

Forms

FormControl

Demo and example

• FormControl

Min/max selection

Demo

• Min/max selection

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>

autoSearch

Version added: 1.0.7 (Ionic-Pick)

Determines whether or not to automatically search or not. Time is determined by searchDebounce. Autosearch depends strictly on (ionInput), if autoSearch is set to true, (ionChange) becomes redundant and will be ignored. This prevents (ionChange) from firing.

Type

boolean = true

Example

View:

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

canAddItem

Version added: 3.0.1, 4.0.0

Determines whether to allow adding items.

Type

boolean = false

Demo and example

• See Adding, editing and deleting items

canClear

Version added: 3.0.1, 4.0.0

Determines whether to show Clear button.

Type

boolean = false

Demo

• canClear

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

• See Adding, editing and deleting items

canSaveItem

Version added: 3.0.1, 4.0.0

Determines whether to allow editing items.

Type

boolean = false

Demo and example

• See Adding, editing and deleting items

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

• closeButtonText

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

• Disabling items

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

• See Grouping items

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

• See Grouping items

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

• hasInfiniteScroll

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

• hasVirtualScroll

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

• isEnabled

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

• isMultiple

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

• placeholder

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

• shouldStoreItemValue

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

• See Grouping items with VirtualScroll

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

• See Adding, editing and deleting items

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

• confirm()

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

• See Adding, editing and deleting items

disableInfiniteScroll()

Version added: 3.0.1, 4.0.0

Disables infinite scroll.

Demo

• disableInfiniteScroll()

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

• enableInfiniteScroll()

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

• endInfiniteScroll()

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

• endSearch()

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

• scrollToTop()

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

• startSearch()

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

• toggleItems()

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

• See Adding, editing and deleting items

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

• See Adding, editing and deleting items

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

• onInfiniteScroll

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

• See Adding, editing and deleting items

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

• onSearch

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();
}