`Can you bind ngModel values to make select options searchable?`

Question

`Can you bind ngModel values to make select options searchable?`

Is there a way to connect ngModel values with select-searchable options in Ionic so that default values from localStorage are displayed?

<ion-col col-6>
        <select-searchable okText="Select" cancelText="Cancel"
                           class="inputStyle"
                           item-content
                           [(ngModel)]="WarrentItem.deviceManufacturerId"
                           searchFailText="No results found"
                           [items]="allManufacturers"
                           itemValueField="id"
                           itemTextField="value"
                           [canSearch]="true"
                           (ionClear)="onClear($event)"
                           (onChange)="materialChanged2($event)">

        </select-searchable>

      </ion-col>

In this code snippet, I have a list of all manufacturers as options. However, I am looking for a solution to automatically set the default value stored in localStorage when opening this form. Thank you.

angular typescript ionic-framework

Answer 1

Answer №1

To implement this feature, follow these steps:

Embedding the HTML code

<ion-item>
    <ion-label>Port</ion-label>
    <select-searchable
        item-content
        [(ngModel)]="port"
        [items]="ports"
        itemValueField="id"
        itemTextField="name"
        [canSearch]="true"
        (onChange)="portChange($event)">
    </select-searchable>
</ion-item>

Adding TypeScript logic

ports = [
   { id: 1, name: 'Tokai' },
   { id: 2, name: 'Vladivostok' },
   { id: 3, name: 'Navlakhi' }
];
port = {
   id: 3,
   name: 'Navlakhi'
};

Answer 2

To implement this feature, follow these steps:

Embedding the HTML code

<ion-item>
    <ion-label>Port</ion-label>
    <select-searchable
        item-content
        [(ngModel)]="port"
        [items]="ports"
        itemValueField="id"
        itemTextField="name"
        [canSearch]="true"
        (onChange)="portChange($event)">
    </select-searchable>
</ion-item>

Adding TypeScript logic

ports = [
   { id: 1, name: 'Tokai' },
   { id: 2, name: 'Vladivostok' },
   { id: 3, name: 'Navlakhi' }
];
port = {
   id: 3,
   name: 'Navlakhi'
};

`Can you bind ngModel values to make select options searchable?`

Answer №1

Embedding the HTML code

Adding TypeScript logic

Similar questions

Running Angular/Rxjs store (ngrx) calls synchronously

Retrieving a specific item using its ID from a JSON file with Ionic 5

Having trouble getting url-loader to function properly with a customized webpack configuration in an Angular 8

Unexpected Memory Drain in Ionic and Cordova on iOS

Discovering the parameter unions in Typescript has revolutionized the way

Utilizing the Angular formArrayName directive in form elements

Exploring nested promises in TypeScript and Angular 2

Utilize AngularJS directives within an Angular component for enhanced functionality

Issue: The Karma plugin in Angular CLI >6.0 is now exported from "@angular-devkit/build-angular" instead

How can debugging in Chrome be achieved using Typescript?

Location of images in Tomcat for an Angular 7 application

What is the best way for me to use a ternary operator within this code snippet?

Tips for Disabling ML5 Posenet

What is the procedure for inputting the settings for the export module in webpack?

Ensuring the accuracy of nested objects through class validator in combination with nestjs

The reason behind the ghost problem - classRef isn't recognized as a constructor

Error! Unexpected closure occurred while creating an Angular CLI project with npm

What is the best way to change the `this` type of an object that is provided as a parameter to a function

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

"Classes can be successfully imported in a console environment, however, they encounter issues when