title: Ionic selectable component, selected value not showing in console log
body: <p>I'm working on an app that uses ionic-selectable for a dropdown list and when an item is selected the fields below the selector would auto populate the items' values. But I'm stuck even before tying to populate the fields. When I try to console log the values of the selected item on the event change, nothing comes up in the console, not even an error.</p>
  <p>html:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-content [fullscreen]="true"&gt;
    &lt;ion-grid&gt;
      &lt;ion-row&gt;
        &lt;ion-col size-lg="6" md="3"&gt;
      &lt;ion-item&gt;
      &lt;ion-label&gt;Vehicle Search&lt;/ion-label&gt;
      &lt;ionic-selectable
        #selectComponent
        [(ngModel)]="selected"
        [items]="vehicles"
        itemValueField="id"
        itemTextField="name"
        [canSearch]="true"
        searchFailText= "Vehicle not found"&gt;
    &lt;/ionic-selectable&gt;
    &lt;/ion-item&gt;
    &lt;/ion-col&gt;
    &lt;/ion-row&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>ts code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, ViewChild } from '@angular/core';
  import {  IonicSelectableComponent } from 'ionic-selectable';
  
  @Component({
    selector: 'app-work-order',
    templateUrl: './work-order.page.html',
    styleUrls: ['./work-order.page.scss'],
  })
  
  export class WorkOrderPage {
    vehicles = [
        { id:1,
          name: 'Chevy Truck',
          unitNumber: 123 },
        { id:2,
          name: 'Ford Truck',
          unitNumber: 456 },
        { id: 3,
          name: 'Dodge Truck',
          unitNumber: 789 }
      ];
      @ViewChild('selectComponent') selectComponent: IonicSelectableComponent;
      selected = [];
  
      vehicleChanged(event: {
        component: IonicSelectableComponent,
        value: any
  
        })
        {console.log(event.unitNumber);}
  
  
  }</code></pre>
  </div>
  </div>
  
  module.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { IonicSelectableModule } from 'ionic-selectable';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { IonicModule } from '@ionic/angular';
  import { FormsModule } from '@angular/forms';
  import { RouterModule } from '@angular/router';
  import { WorkOrderPage } from './work-order.page';
  
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      RouterModule.forChild([
        {
          path: '',
          component: WorkOrderPage
        }
  
      ]),
      IonicSelectableModule
    ],
    declarations: [WorkOrderPage]
  })
  export class WorkOrderPageModule {}</code></pre>
  </div>
  </div>
  </p>
  <p>I've looked through questions but haven't found what is wrong with how it is written.  I'm very new to coding so I apologize if the etiquette of my question is incorrect. Any help is appreciated.  Thank you.</p>