`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

Conceal API request details on the network tab

What is the best way to retrieve the values from the dynamically generated inputs in my .component.ts file through *ngFor?

Issue with TypeScript: Error appears when importing express after running "npm i @types/express -D"

Steps for ensuring a prop is required in TypeScript React based on a condition

Error: Unable to access the 'TEXT_TYPE' property because it is undefined in the BarcodeScanner

Tips for sending code confirmation in Amazon Cognito identity using nest.js

Issue encountered with Next.js 13.4 and NextAuth: A Type Error stating that 'AuthOptions' is not compatible with type 'never'

Steps for generating a multer file using a link to an image

I am facing an issue with calling a controller from an HTTP GET request in ASP.Net Core 6 using a Single Page Application (SPA) endpoint

Using Typescript to establish a connection between ngModel and an object's property

Is it possible for a conditional type in TypeScript to be based on its own value?

Can Angular 4 experience race conditions?

Include an additional query parameter called login_hint in microsoft-adal-angular6 directly from an Angular component

Is it possible to trigger the setState() function of a parent component when a child component is clicked?

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

Experiencing Issues with Angular Service Worker - Outdated Build Persisting - Seeking Angular Resolution

Expanding the Mui Typescript breakpoints within a TypeScript environment

Encountering a problem while bringing in screens: 'The file screens/xxx cannot be located within the project or any of these folders.'

I require the ability to modify cellEditor parameters in real-time

Typescript: The ConstructorParameters type does not support generics