Currently, I am attempting to implement the autocomplete feature from primeNg based on their documentation, but I am facing issues with displaying the suggestions.
- Firstly, I added the AutoComplete module by importing it:
import { AutoCompleteModule } from 'primeng/autocomplete'; - Then, I included the module in my imports array:
imports: [CommonModule, FormsModule, AutoCompleteModule], - Below is a snippet of the code I have implemented:
Here is a part of my .html file:
<div fxLayout="column">
<div>
<h1>Hero Search</h1>
<p-divider></p-divider>
</div>
<div>
<p-autoComplete [(ngModel)]="selectedHero" [suggestions]="cambiar()" (completeMethod)="filterHeros($event)" field="name" [minLength]="1"></p-autoComplete>
</div>
</div>
Here is part of my component file:
import { Component, OnInit } from '@angular/core';
import { Heroe } from '../../interface/heroes.interface';
import { HeroesService } from '../../services/heroes.service';
// Additional component details...
My service file:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Heroe } from '../interface/heroes.interface';
// Further service details...
The primeNg documentation states that for suggestions:
name:suggestions Type:array Default:null Description:An array of suggestions to display.
Despite trying to pass the array as both string[] and any[], I have been unsuccessful in getting the suggestions to appear. Any assistance you can provide would be greatly appreciated. Thank you.