Angular PrimeNG Form AutoComplete Templating Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see the Form AutoComplete Templating Component in Angular PrimeNG.

The Form AutoComplete is an input field that facilitates real-time suggestions while the user enters the data in the input field. TheTemplating Component allows displaying custom content inside the suggestions panel.

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2:  After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Syntax:

<ng-template>...</ng-template>

Project Structure: It will look like the following:

Example 1: This code example describes the basic usage of the Form AutoComplete Templating Component in Angular PrimeNG.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>

    <h3>A computer science portal for geeks</h3>

    <h4>
        Angular PrimeNG Form
        AutoComplete Templating Component
    </h4>
    <h5>Dropdown and Templating</h5>
    <p-autoComplete [(ngModel)]="selectedCountryAdvanced"
                    [suggestions]="filteredCountries"
                    (completeMethod)="filterCountry($event)"
                    field="name"
                    [dropdown]="true">
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <div>{{ country.name }}</div>
            </div>
        </ng-template>
    </p-autoComplete>
</div>

• app.component.ts

Javascript

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { SelectItem } from "primeng/api";
import { SelectItemGroup } from "primeng/api";
import { FilterService } from "primeng/api";
import { CountryService } from "./countryservice";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [CountryService, FilterService]
})
export class AppComponent {
    selectedCountry: any;
    countries: any[];
    filteredCountries: any[];
    selectedCountries: any[];
    selectedCountryAdvanced: any[];
    filteredBrands: any[];
    groupedCities: SelectItemGroup[];
    filteredGroups: any[];

    constructor(
        private countryService: CountryService,
        private filterService: FilterService
    ) { }

    ngOnInit() {
        this.countryService.getCountries().then(countries => {
            this.countries = countries;
        });
    }

    filterCountry(event) {
        let filtered: any[] = [];
        let query = event.query;
        for (let i = 0; i < this.countries.length; i++) {
            let country = this.countries[i];
            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                filtered.push(country);
            }
        }
        this.filteredCountries = filtered;
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AutoCompleteModule,
        FormsModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

• countryservice.ts

Javascript

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class CountryService {

    constructor(private http: HttpClient) { }

    getCountries() {
        return this.http.get < any > ('assets/countries.json')
            .toPromise()
            .then(res => <any[] > res.data)
            .then(data => { return data; });
    }
}

• countries.json

Javascript

{
  "data": [
    { "name": "Mumbai" },
    { "name": "Dadar" },
    { "name": "Vasai" },
    { "name": "Naigaon" },
    { "name": "Virar" },
    { "name": "Andheri" },
    { "name": "Nallasopara" },
    { "name": "Malad" },
    { "name": "Dahisar" }
  ]
}

Output:

Example 2: This code example describes the basic usage of the Form AutoComplete Templating Component in Angular PrimeNG by disabling the dropdown input field.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form AutoComplete
        Templating Component
    </h4>
    <h5>Dropdown and Templating</h5>
    <p-autoComplete [(ngModel)]="selectedCountryAdvanced"
                    [suggestions]="filteredCountries"
                    (completeMethod)="filterCountry($event)"
                    field="name"
                    [dropdown]="true"
                    disabled="true">
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <div>{{ country.name }}</div>
            </div>
        </ng-template>
    </p-autoComplete>
</div>

• app.component.ts

Javascript

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { SelectItem } from "primeng/api";
import { SelectItemGroup } from "primeng/api";
import { FilterService } from "primeng/api";
import { CountryService } from "./countryservice";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [CountryService, FilterService]
})
export class AppComponent {
    selectedCountry: any;
    countries: any[];
    filteredCountries: any[];
    selectedCountries: any[];
    selectedCountryAdvanced: any[];
    filteredBrands: any[];
    groupedCities: SelectItemGroup[];
    filteredGroups: any[];

    constructor(
        private countryService: CountryService,
        private filterService: FilterService
    ) { }

    ngOnInit() {
        this.countryService.getCountries().then(countries => {
            this.countries = countries;
        });
    }

    filterCountry(event) {
        let filtered: any[] = [];
        let query = event.query;
        for (let i = 0; i < this.countries.length; i++) {
            let country = this.countries[i];
            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                filtered.push(country);
            }
        }
        this.filteredCountries = filtered;
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AutoCompleteModule,
        FormsModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

• countryservice.ts

Javascript

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class CountryService {

    constructor(private http: HttpClient) { }

    getCountries() {
    return this.http.get<any>('assets/countries.json')
      .toPromise()
      .then(res => <any[]>res.data)
      .then(data => { return data; });
    }
}

Output:

Reference: https://www.primefaces.org/primeng/autocomplete