Ionic 5 auto complete

Hi Team,

How can i implement auto complete in ionic 5. We can use the

i used the below npm

npm i ion-autocomplete

i am getting below error when we build, How to resolve the issue.

ERROR in ./node_modules/ionic4-auto-complete/fesm2015/ionic4-auto-complete.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property ‘kind’ of undefined
at isAngularDecoratorMetadataExpression (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16514:30)
at Object.forEachChild (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16740:24)
at checkNodeForDecorators (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16635:21)
at checkNodeForDecorators (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16703:24)
at checkNodeForDecorators (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16692:24)
at checkNodeForDecorators (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (E:\wamp64\www\rmf_mobile_app\devsonorousapp\node_modules\typescript\lib\typescript.js:16599:21)
[ERROR] An error occurred while running subprocess ng.

Thanks in Advance.

Regards,
Ramji

All I can say is “use another library”, because that one’s for Ionic 1 / AngularJS, which is totally incompatible with later versions of Ionic.

I recommend Ionic Selectable for Ionic 5:

1 Like

Hi,
Thanks for your reply.

Shall i use the ngselect in ionic for auto complete. kindly add your comments.

Thanks in Advance

Regards,
Ramji

Hi,

Shall we use Ngbmodule in ionic 5 for auto searc

npm install --save @ng-bootstrap/ng-bootstrap

kindly suggest me.

Thanks in advance

Regards,
Ramji

Hi,

As per your recommended i used the Ionic-selectable but when i run the ionic i am getting below error

[ng] ERROR in node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable-modal.component.d.ts:13:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 13 get _canClearCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable-modal.component.d.ts:14:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 14 get _isMultipleCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable-modal.component.d.ts:15:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 15 get _isSearchingCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable-modal.component.d.ts:16:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 16 get _isIos(): boolean;
[ng] ~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable-modal.component.d.ts:18:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 18 get _isAddItemTemplateVisibleCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:16:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 16 get _isMultipleCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:17:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 17 get _hasValueCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:18:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 18 get _hasPlaceholderCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:19:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 19 get _hasIonLabelCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:20:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 20 get _hasDefaultIonLabelCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:21:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 21 get _hasFixedIonLabelCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:22:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 22 get _hasStackedIonLabelCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:23:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 23 get _hasFloatingIonLabelCssClass(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:44:17 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 44 private get _hasInfiniteScroll();
[ng] ~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:45:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 45 get _shouldStoreItemValue(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:70:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 70 get label(): string;
[ng] ~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:79:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 79 get searchText(): string;
[ng] ~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:80:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 80 set searchText(searchText: string);
[ng] ~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:89:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 89 get isSearching(): boolean;
[ng] ~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:98:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 98 get hasSearchText(): boolean;
[ng] ~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:99:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 99 get value(): any;
[ng] ~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:100:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 100 set value(value: any);
[ng] ~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:117:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 117 get isEnabled(): boolean;
[ng] ~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:118:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 118 set isEnabled(isEnabled: boolean);
[ng] ~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:126:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 126 get shouldBackdropClose(): boolean;
[ng] ~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:127:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 127 set shouldBackdropClose(shouldBackdropClose: boolean);
[ng] ~~~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:160:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 160 get isOpened(): boolean;
[ng] ~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:178:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 178 get hasConfirmButton(): boolean;
[ng] ~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:179:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 179 set hasConfirmButton(hasConfirmButton: boolean);
[ng] ~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:232:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 232 get isOnSearchEnabled(): boolean;
[ng] ~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:233:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 233 set isOnSearchEnabled(isOnSearchEnabled: boolean);
[ng] ~~~~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:241:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 241 get canClear(): boolean;
[ng] ~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:242:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 242 set canClear(canClear: boolean);
[ng] ~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:292:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 292 get isMultiple(): boolean;
[ng] ~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:293:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 293 set isMultiple(isMultiple: boolean);
[ng] ~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:475:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 475 get itemsToConfirm(): any;
[ng] ~~~~~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:524:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 524 get canAddItem(): boolean;
[ng] ~~~~~~~~~~
[ng] node_modules/ionic-selectable/src/app/components/ionic-selectable/ionic-selectable.component.d.ts:525:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 525 set canAddItem(canAddItem: boolean);
[ng] ~~~~~~~~~~
[ng]
[ng] Date: 2020-06-03T11:10:16.209Z - Hash: 5df49524bee9a66cb61e - Time: 30041ms

kindly check and let me know

i am using ionic 5 version

Thanks in advance

Try downgrading the Ionic Selectable component to v4.4.0.

npm install ionic-selectable@4.4.0

ok will try thanks for your reply

Hi

As per your suggestion i installed the mentioned version but i am getting below error

Can’t bind to ‘items’ since it isn’t a known property of ‘ionic-selectable’.

  1. If ‘ionic-selectable’ is an Angular component and it has ‘items’ input, then verify that it is part of this module.
  2. If ‘ionic-selectable’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (“rm-control” placeholder=“Select Account”
    [(ngModel)]=“selected_account”
    [ERROR ->][items]=“arrAccountName”
    itemValueField=“accountname”
    itemTextField=“acco”): ng:///ContactsPageModule/SynccrmcontactPage.html@52:14
    ‘ionic-selectable’ is not a known element:

I have added ionicselectablemodule in app.module.ts also still iam getting the same error

any idea to resolve this issue.

Thanks in advance

Ramji

You need to import the module in your page’s module.ts file. For example, if you’re using the component in the Home Page, import it in your home.module.ts file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import { IonicSelectableModule } from 'ionic-selectable';
i
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';

@NgModule({
	imports: [
		CommonModule,
		FormsModule,
		IonicModule,
		IonicSelectableModule,
		HomePageRoutingModule
	],
	declarations: [HomePage]
})
export class HomePageModule {}

Hope this helps,
Alex

1 Like

yes i have imported "IonicSelectableModule " in both pages app.module.ts and home.module.ts

afterthat i get this below error i am using ionic v5.4.13

  1. If ‘ionic-selectable’ is an Angular component and it has ‘items’ input, then verify that it is part of this module.
  2. If ‘ionic-selectable’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (“rm-control” placeholder=“Select Account”
    [(ngModel)]=“selected_account”
    [ERROR ->][items]=“arrAccountName”
    itemValueField=“accountname”
    itemTextField=“acco”): ng:///ContactsPageModule/SynccrmcontactPage.html@52:14
    ‘ionic-selectable’ is not a known element:

Thanks
Ramji

It looks like an error is thrown from SynccrmcontactPage.html. Make sure you import the IonicSelectableModule into the module for that page.

Hi,

Thanks for your reply. will check and let you know.

Regards,
Ramji