How to display real count of selected item from ion-list?

Question

So I am build a new suppression page for mobile app. For legacy reasons we are using, ionic 3 angular 5.

Problem I am facing is getting a real count of ion-items selected from a list of ion-select mulitple=true items. I have following html

  <ion-list>
    <ion-item>
      <ion-label>Select Nodes</ion-label>
      <ion-select [(ngModel)]="selectedNodes" multiple="true">
        <ion-option *ngFor="let node of incident.context['nodes']" value={{node}}>{{ node }}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

incident.context['nodes'] contains a list like ["foo", "bar","baz"] Once selection is made it is displaying the list of selected items. But I want to display the count instead. How do I do that?

Answer 1

I don't think there is a direct way to do it. You could however modify the DOM directly (eg. using Angular Renderer2) to show the length. Try the following

1. Bind an event handler (onChange() here) to ngModelChange event.

<ion-list>
  <ion-item>
    <ion-label #select>Select Nodes</ion-label>
    <ion-select (ngModelChange)="onChange()" [(ngModel)]="selectedNodes" multiple="true">
      <ion-option *ngFor="let node of incident.context['nodes']" value={{node}}>{{ node }}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

2. The selected items are displayed in a container in DOM with class .select-text. Modify it's innerHTML property directly in the event handler.

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

...
export class AppComponent {
  selectedNodes = [];
  incident = {
    context: {
      nodes: ['node1', 'node2', 'node3', 'node4' ]
    }
  };

  constructor(private renderer: Renderer2) { }

  onChange() {
    setTimeout(() => { 
      const element = this.renderer.selectRootElement('.select-text');
      this.renderer.setProperty(element, 'innerHTML', this.selectedNodes.length);
    }, 0);
  }
}

Working example: Stackblitz

---

^{Without the setTimeout the innerHTML property would not be changed as it may be perceived as not yet available. It's a quick workaround.}

Answer 2

if selectedNode is the array that is containing the list of items you selected, you can simply display length of the array to show total selected items.

    <ion-list> 
    <ion-item> 
    <ion-label>Total Count</ion-label> 
    {{selectedNodes.length}}
    </ion-select> 
    </ion-item> 
    </ion-list>