title: Ionic 4 ionic-selectable not showing the value
body: <p>I have a form of update profile. Problem is i need to update location by ionic-selectable but the values is not showing in place holder.</p>
  
  <pre><code>&lt;ion-header&gt;
      &lt;ion-toolbar&gt;
          &lt;ion-title color="coal"&gt;{{ 'menu.headers.update_profile' | translate }}&lt;/ion-title&gt;
  &lt;!--         &lt;ion-buttons slot="start"&gt;
              &lt;ion-button (click)="onBackFunction($event)" color="coal"&gt;
                  &lt;ion-icon slot="icon-only" name="close"&gt;&lt;/ion-icon&gt;
              &lt;/ion-button&gt;
          &lt;/ion-buttons&gt; --&gt;
                  &lt;ion-buttons slot="start"&gt;
              &lt;ion-menu-button autoHide="false"&gt;&lt;/ion-menu-button&gt;
          &lt;/ion-buttons&gt;
          &lt;ion-buttons slot="end"&gt;
  
          &lt;/ion-buttons&gt;
      &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  &lt;ion-content scrollY="true"&gt;
      &lt;ion-grid no-margin no-padding&gt;
          &lt;form [formGroup]="profileForm" (keydown)="onKeyDownFunction($event)"&gt;
              &lt;ion-row align-items-center padding-top padding-bottom&gt;
                  &lt;!-- Show Avatar based on the firstName, lastName, and photo --&gt;
                  &lt;ngx-avatar *ngIf="!photo &amp;&amp; firstName.value &amp;&amp; lastName.value" [name]="firstName.value + ' ' + lastName.value" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown"&gt;
                  &lt;/ngx-avatar&gt;
                  &lt;ngx-avatar *ngIf="!photo &amp;&amp; (!firstName.value &amp;&amp; !lastName.value)" name="FirstName LastName" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown"&gt;
                  &lt;/ngx-avatar&gt;
                  &lt;ngx-avatar *ngIf="!photo &amp;&amp; (firstName.value &amp;&amp; !lastName.value)" [name]="firstName.value" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown"&gt;
                  &lt;/ngx-avatar&gt;
                  &lt;ngx-avatar *ngIf="!photo &amp;&amp; (!firstName.value &amp;&amp; lastName.value)" [name]="lastName.value" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown"&gt;
                  &lt;/ngx-avatar&gt;
                  &lt;img *ngIf="photo" [src]="photo" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown" /&gt;
  
                  &lt;!-- Form Inputs --&gt;
                  &lt;app-text-input placeholder="{{ 'form.placeholders.first_name' | translate }}" clearInput [formControl]="firstName" text-capitalize margin-bottom&gt;&lt;/app-text-input&gt;
                  &lt;app-label *ngIf="hasError &amp;&amp; (firstName.hasError('required') || !firstName.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom&gt;{{ 'form.errors.first_name' | translate }}&lt;/app-label&gt;
  
                  &lt;app-text-input placeholder="{{ 'form.placeholders.last_name' | translate }}" clearInput [formControl]="lastName" text-capitalize margin-bottom&gt;&lt;/app-text-input&gt;
                  &lt;app-label *ngIf="hasError &amp;&amp; (lastName.hasError('required') || !lastName.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom&gt;{{ 'form.errors.last_name' | translate }}&lt;/app-label&gt;
  
                  &lt;app-text-input placeholder="{{ 'form.placeholders.username' | translate }}" clearInput [formControl]="username" margin-bottom&gt;&lt;/app-text-input&gt;
                  &lt;app-label *ngIf="hasError &amp;&amp; (username.hasError('required') || !username.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom&gt;{{ 'form.errors.username_invalid' | translate }}&lt;/app-label&gt;
                  &lt;app-label *ngIf="hasError &amp;&amp; usernameTaken" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom&gt;{{ 'form.errors.username_taken' | translate }}&lt;/app-label&gt;
  
                  &lt;app-text-input placeholder="{{ 'form.placeholders.email' | translate }}" clearInput [formControl]="email" margin-bottom&gt;&lt;/app-text-input&gt;
                  &lt;app-label *ngIf="hasError &amp;&amp; (email.hasError('required') || !email.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom&gt;{{ 'form.errors.email' | translate }}&lt;/app-label&gt;
                  &lt;app-label *ngIf="hasError &amp;&amp; emailTaken" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom&gt;{{ 'form.errors.email_taken' | translate }}&lt;/app-label&gt;
                  &lt;ion-card style="background-color: white; margin-top: 0px; border-radius: 0px;"&gt;
                   &lt;app-label style="background-color: white"&gt;
  
                    &lt;ionic-selectable
                      [formControl]="location"
                      [items]="data"
                      itemValueField="id"
                      itemTextField="name"
                      [canSearch]="true"
                      placeholder="{{location}}"
  
                      &gt;
                    &lt;/ionic-selectable&gt;
                  &lt;/app-label&gt;
              &lt;/ion-card&gt;
  
                  &lt;!-- Push Notifications --&gt;
                  &lt;!-- &lt;app-button [color]="notifications ? 'success' : 'danger'" text-uppercase
            (click)="onToggleNotificationsFunction($event)" margin-bottom&gt;
            {{ 'update_profile.buttons.notifications' | translate }} {{ notifications ? 'Enabled' : 'Disabled' }}
          &lt;/app-button&gt; --&gt;
  
                  &lt;!-- Change Password --&gt;
                  &lt;app-button *ngIf="hasPassword" color="coal" text-uppercase (click)="onChangePasswordFunction($event)" margin-bottom&gt;{{ 'update_profile.buttons.change_password' | translate }}&lt;/app-button&gt;
  
                  &lt;!-- Save Changes --&gt;
                  &lt;app-button color="gold" text-uppercase (click)="onSaveFunction($event)" margin-bottom&gt;{{ 'update_profile.buttons.save_changes' | translate }}&lt;/app-button&gt;
              &lt;/ion-row&gt;
          &lt;/form&gt;
      &lt;/ion-grid&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>.ts this is how i am setting the valeus in input fields i need to show the location in ionic-selectable</p>
  
  <pre><code>  ionViewWillEnter() {
      // Disable SideMenu
      this.menuCtrl.enable(true);
  
      this.auth.getUser().then((user: firebase.User) =&gt; {
        // Check if user has password, and show Change Password button on view
        if (user.providerData[0].providerId === "password") {
          this.hasPassword = true;
        }
  
        // Copy the userData to use as reference, because it will be cleared in order to refresh the ngx-avatar component on HomePage and SideMenu
        this.user = JSON.parse(JSON.stringify(this.auth.getUserData()));
        console.log(this.user);
  
  
        // Set value on ProfileForm
        this.profileForm.patchValue({
          email: this.user.email,
          firstName: this.user.firstName,
          lastName: this.user.lastName,
          username: this.user.username.substr(1),
          location: this.user.location.name
        });
  
        this.photo = this.user.photo;
        this.photos = [this.user.photo];
  
        this.notifications = this.user.notifications;
  
        this.canGoBack = true;
      });
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZwtSZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZwtSZ.png" alt="enter image description here"></a></p>
  
  <p>More Explanation:
  As in input its showing values of data i need to show the values in ionic-selectable also.</p>