Angular 4. I can not use PrimeNG's Autocomplete

Question

Angular 4. I can not use PrimeNG's Autocomplete

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am learning to use Angular 4, and in my effort to learn I want to install the Autocomplete element of PrimeNG and I get the following error:

My project is basic and I have the following:

autocomplete.component.html:

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>

autocomplete.component.ts

import { AutoCompleteModule } from 'primeng/primeng';
import { Component, OnInit } from '@angular/core';
import { AutocompleteService } from '../../servicios/autocomplete.service';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html'
})
export class AutocompleteComponent implements OnInit {

   text: string;
   results: string[];

   search(event) {
      console.log( event.query )
      //   this.mylookupservice.getResults(event.query).then(data => {
      //       this.results = data;
      //   });
   }

  constructor( private _autocompleteService:AutocompleteService ) { }

  ngOnInit() {
  }

}

autocomplete.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AutocompleteService {
   datos:any[] = [];
   urlBusqueda:string = "http://localhost:3000/consultas/";

   constructor( private http:Http ) {  }

   getDatos(termino:string){
      console.log( termino );

      // let query = '${ termino }'
      // let url = this.urlBusqueda + query;
      // return {};
      // console.log( url );
   }

}

Adempas, I have referenced the component and the service in app.module.ts. What can I be doing wrong?

angularjs

asked by Luis 28.05.2017 в 21:02

source

2 answers

How to publish software as free software? [closed] $ CLASSPATH on ubuntu

score 1 · Answer 1

All imports of primeng must be done in the app-module, only you make them on your component (in addition to app-modules) when you have to declare them and perform a function of them. Ex:

import { Component, OnInit } from '@angular/core';
import { Message } from 'primeng/primeng';

export class Ejemplo implements OnInit {

message: Message[] = [];

constructor() { }

ngOnInit() {
  this.message = []
  this.message.push({ severity: 'info', summary: 'Buenas!', detail: 'Se cargo el componente de forma exitosa.' });    
}

In your case it would be the following, within app-module:

import { AutoCompleteModule } from 'primeng/primeng';

@NgModule({ declarations: [], import :[ AutoCompleteModule ], providers:[], bootstrap:[] })

You can also declare any child-component that covers your    autocomplete.component (parent-component), using the angle decorator ViewChild

HTML
<p-autoComplete #ac [(ngModel)]="text" [suggestions]="results"(completeMethod)="search($event)"></p-autoComplete>
TS
  //Child component
  @ViewChild('ac') autocomplete;
and thus access the properties, events and methods of it

score 0 · Answer 2

Perform the following import in the app.module.ts

import { AutoCompleteModule } from 'primeng/primeng';

and add AutocompleteModule in the Imports array.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AutoCompleteModule
  ],

It works.