NODE Version: 8.12.0 Angular Version: 7.3.4 PrimeNG Version : 7.0.0
I am using dropdown feature of PrimeNG's autocomplete component. It only loads the dropdown for the first time same nothing happens after words it is the issue with autocomplete feature function My code looks like :
<p-autoComplete [(ngModel)]="selectedCompany" styleClass="smlldropdwn" [suggestions]="companySuggestions" (completeMethod)="searchCompanies($event)" field="Name"
(onSelect)="getTagsList()" minLength ="0" [dropdown]="true" (onDropdownClick)="dropCompanies($event)" [size]="20" spellcheck="false">
<ng-template let-selectedCompany pTemplate="item">
<div>
<div style=" text-transform: capitalize;">{{selectedCompany.Name}}</div>
</div>
</ng-template>
</p-autoComplete>
public ManagementCompanies = [];
public companySuggestions = [];
searchCompanies(event) {
if(event.originalEvent.type != "click")
{
if(event.query == "" || event.query == null){
setTimeout(() => {
this.companySuggestions = this.ManagementCompanies;
}, 100);
}else{
var suggestions= [];
this.companySuggestions = [];
for (var i=0; i < this.ManagementCompanies.length; i++) {
if (this.ManagementCompanies[i].Name.toLowerCase().indexOf(event.query.toLowerCase()) !== -1){
suggestions.push(this.ManagementCompanies[i]);
}
}
this.companySuggestions = suggestions;
}
}
}
dropCompanies(event) {
if(event.originalEvent.type == "click")
{
var suggestions= [];
var companySuggestions = [];
suggestions = this.ManagementCompanies;
setTimeout(() => {
this.companySuggestions = suggestions;
}, 100);
}
}
My app.module.ts looks like:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import { RouterModule, Routes} from '@angular/router';
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; // used for session timeout
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // used for dropdowns
import { AppComponent } from './app.component';
import { WebloginComponent } from './components/weblogin/weblogin.component';
import { MlandingpageComponent } from './components/mlandingpage/mlandingpage.component';
import { AuthGuard } from './guards/auth.guard';
import { AuthService } from './services/auth.service';
import { UseraccessdataService } from './services/useraccessdata.service';
import {DialogModule} from 'primeng/primeng';
import {CalendarModule} from 'primeng/primeng';
import {AutoCompleteModule} from 'primeng/autocomplete';
const appRoutes: Routes = [
{path:'',component: WebloginComponent},
{path:'weblogin',component: WebloginComponent},
{path:'landingpage',component: MlandingpageComponent},
{path:'**',component: WebloginComponent}
]
@NgModule({
declarations: [
AppComponent,
WebloginComponent,
MlandingpageComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes), //, {useHash: true}
CalendarModule,
DialogModule,
AutoCompleteModule,
NgIdleKeepaliveModule.forRoot()
],
providers: [AuthService,UseraccessdataService,AuthGuard],
bootstrap: [AppComponent],
exports: [RouterModule]
})
export class AppModule { }
