How to count no of selected item and display in label

Question

I am using IONIC3. And I have one ion-select with multiple. Now whatever I am selecting that is showing in comma separated value. But I want to display in this format like if 2 are selected then it should show '2 of 6 Selected'

  <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true">
      <ion-option>Bacon</ion-option>
      <ion-option>Black Olives</ion-option>
      <ion-option>Extra Cheese</ion-option>
      <ion-option>Mushrooms</ion-option>
      <ion-option>Pepperoni</ion-option>
      <ion-option>Sausage</ion-option>
    </ion-select>
  </ion-item>

Can anyone please help me how to do this.

Answer 1

Here is solution :

component.html

  <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true" [selectedText]="textToDisplay" (ionChange)="onSelectChange($event)">
      <ion-option *ngFor="let option of options">{{option}}</ion-option>
    </ion-select>
  </ion-item>

component.ts

export class HomePage {
  toppings:any;
  selectedOptions:any=[];
  options=[
    "Bacon",
    "Black Olives",
    "Extra Cheese",
    "Mushrooms",
    "Pepperoni",
    "Sausage"
  ];
  textToDisplay:string='';
  constructor(public navCtrl: NavController) {

  }

  onSelectChange(selectedValue: any) {
    this.textToDisplay = "Selected "+selectedValue.length+" of "+this.options.length;
  }
}

Here is the stackblitz link.