ion4-autocomplete v1.1.0

Ionic 4 Autocomplete

Autocomplete component for ionic 4.

Support

• @ionic/angular 4.0.0

Usage

Installation

npm i ion4-autocomplete

Import Module

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { AutocompleteModule } from "ion4-autocomplete";
 
@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AutocompleteModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ]
})
export class AppModule {}

NgModel mode

<ion-autocomplete [suggestions]="customers"
                  (itemSelected)="customerSelected($event)"
                  [(ngModel)]="customerId">
</ion-autocomplete>

import { Component } from '@angular/core';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  customers: any[];
  customerId: number;
  selectedCustomer: any;
  constructor() { }
  
  customerSelected(customer) {
    this.selectedCustomer = customer;
  }
  
}

Reactive Forms

<ion-autocomplete [suggestions]="customers"
                  (itemSelected)="customerSelected($event)"
                  formControlName="customerId">
</ion-autocomplete>

import { Component } from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  customers: any[];
  selectedCustomer: any;
  formGroup: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
    customerId: []
    ...
    });
   }
  
  customerSelected(customer) {
    this.selectedCustomer = customer;
  }
  
}

Input Properties

Output Properties

Thanks for reading