npm i ngx-angular-autocomplete
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { NgxAutocompleteModule } from 'ngx-angular-autocomplete'; @NgModule({ imports: [ BrowserModule, FormsModule,NgxAutocompleteModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { Component } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "Ngx Angular AutoComplete"; selected_employee: any ; public employees = [ { id: 1, name: "Byram", gender: "Male" }, { id: 2, name: "Jeniffer", gender: "Female" }, { id: 3, name: "Gerda", gender: "Female" }, { id: 4, name: "Ferrell", gender: "Male" }, { id: 5, name: "Rowe", gender: "Female" }, { id: 6, name: "Josephine", gender: "Female" }, { id: 7, name: "Alfons", gender: "Male" }, { id: 8, name: "Rycca", gender: "Female" }, { id: 9, name: "Mandy", gender: "Female" }, { id: 10, name: "Bunni", gender: "Female" }, { id: 11, name: "Stepha", gender: "Female" }, { id: 12, name: "Pete", gender: "Male" }, { id: 13, name: "Keary", gender: "Male" }, { id: 14, name: "Esme", gender: "Female" }, { id: 15, name: "Juieta", gender: "Female" } ]; selectEvent(event) { this.selected_employee = JSON.stringify(event) } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<h3 style="text-align: center">{{title}}</h3> <div style="width: 50%;position: absolute;left: 25%;top: 12%"> <ngx-autocomplete [searchKeyword]="'name'" [inputId]="'searchEmployee'" [placeholderValue]="'Enter the Employee Name'" [entries]="employees" (selectedValue)="selectEvent($event)"> </ngx-autocomplete> </div> <div style="margin-top: 50%; font-weight: bold"> Selected Employee: {{ selected_employee}} </div> |
FULL SOURCE CODE
