Angular PrimeNG Form AutoComplete Properties 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 Properties 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.

Angular PrimeNG Form AutoComplete Properties:

• suggestions: This property is used to define an array of suggestions to display.
• field: This property is used to define the field of a suggested object to resolve and display.
• scrollHeight: This property is used to define the maximum height of the suggestions panel.
• dropdown: This property is used to define the display button next to the input field when enabled.
• multiple: This property is used to specify if multiple values can be selected.
• dropdownIcon: This property is used to define the icon class of the dropdown icon.
• minLength: This property is used to define the minimum number of characters to initiate a search.
• delay: This property is used to define the delay between keystrokes to wait before sending a query.
• completeOnFocus: This property is used to run a query when input receives focus.
• style: This property is used to define the inline style of the component.
• inputStyle: This property is used to define the inline style of the input field
• panelStyle: This property is used to define the inline style of the overlay panel element.
• styleClass:  This property is used to style the class of the component.
• inputStyleClass: This property is used to define the inline style of the input field.
• panelStyleClass: This property is used to style the class of the overlay panel element.
• inputId: This property is used to define the Identifier of the focus input to match a label defined for the component.
• name: This property is used to define the name of the input element.
• optionGroupLabel: This property is used to define the name of the label field of an option group.
• group: This property is used to display options as grouped when nested options are provided.
• optionGroupChildren: This property is used to define the name of the options field of an option group.
• placeholder: This property is used to define the hint text for the input field.
• readonly: This property specifies the input cannot be typed.
• disabled: This property that the component should be disabled.
• maxlength: This property is used to define the maximum number of characters allowed in the input field.
• size: This property is used to define the size of the input field.
• appendTo: This property is used to define the target element to attach the overlay, valid values are “body” or a local ng-template variable of another element.
• tabindex: This property is used to define the index of the element in tabbing order.
• dataKey: This property is used to define the property to uniquely identify a value in options.
• autoHighlight: This property is used to highlight the first item in the list by default.
• type: This property is used to define the type of the input, and defaults to “text”.
• showEmptyMessage: This property is used to show the empty message if true.
• emptyMessage: This property is used to define the text to display when there is no data.
• immutable: This property is used to define how the suggestions should be manipulated.
• required: This property is used to specify that an input field must be filled out before submitting the form.
• autofocus: This property is used to define the specifications that the component should automatically get focused on load.
• forceSelection: When this property is present then autocomplete clears the manual input if it does not match the suggestions to force only accepting values from the suggestions.
• dropdownMode: This property is used to specify the behavior dropdown button.
• baseZIndex: This property is used to define the base zIndex value to use in layering.
• autoZIndex: This property is used to define the manage layering automatically.
• showTransitionOptions: This property is used to define the transition options of the show animation.
• hideTransitionOptions: This property is used to define the transition options of the hide animation.
• ariaLabel: This property is used to define the string that labels the input for accessibility.
• ariaLabelledBy: This property is used to define one or more IDs in the DOM that labels the input field.
• dropdownAriaLabel: This property is used to define the string that labels the dropdown button for accessibility.
• unique: This property is used to define the uniqueness of selected items on multiple modes.
• autocomplete: This property is used to define the string that autocompletes attributes to the current element.
• showClear: When this property is enabled then a clear icon is displayed to clear the value.
• virtualScroll: In this property, data should be loaded on demand during the scroll.
• virtualScrollItemSize: This property is used to define the height of an item in the list for VirtualScrolling.
• virtualScrollOptions: This property is used for the use of the scroller feature.
• lazy: This property is used to define if the data is loaded and interacted with in a lazy manner.

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

Project Structure: It will look like the following:

Steps to run the application: Run the below command to see the output

npm run

Example 1: In the below code, we will see how to use the Angular PrimeNG Form AutoComplete Properties Component using dropdown.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG AutoComplete Properties.</h5>

<p-autoComplete
    [suggestions]="gfg"
    (completeMethod)="filterCourses($event)"
    field="name"
    [dropdown]="true">
</p-autoComplete>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { FilterService } from "primeng/api";
import { GFGCourse } from "./gfgCourseService";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [GFGCourse, FilterService]
})

export class AppComponent {
    courses: any[];
    gfg: any[];

    constructor(private GFGCourse: GFGCourse) {}

    ngOnInit() {
        this.GFGCourse.getCourses().then((courses) => {
            this.courses = courses;
        });
    }

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

        this.gfg = 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 { }

• gfgCourseService.ts:

Javascript

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

@Injectable()
export class GFGCourse {
    constructor(private http: HttpClient) {}

    getCourses() {
        return this.http
            .get<any>("assets/courses.json")
            .toPromise()
            .then((res) => <any[]>res.data)
            .then((data) => {
                return data;
            });
    }
}

• courses.json:

Javascript

{
  "data": [
      { "name": "DSA Self Paced", "code": "AF" },
      { "name": "C++ STL", "code": "AX" },
      { "name": "System Design", "code": "AL" },
      { "name": "Web Development", "code": "DZ" },
      { "name": "Computer Subjects", "code": "AS" }
  ]
}

Output:

Example 2: Below is another code that illustrates the use of the Angular PrimeNG Form AutoComplete Properties Component using the multiple.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG AutoComplete Properties.</h5>

<p-autoComplete
    [suggestions]="gfg"
    (completeMethod)="filterCourses($event)"
    field="name"
    [dropdown]="true">
</p-autoComplete>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { FilterService } from "primeng/api";
import { GFGCourse } from "./gfgCourseService";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [GFGCourse, FilterService]
})

export class AppComponent {
    courses: any[];
    gfg: any[];

    constructor(private GFGCourse: GFGCourse) {}

    ngOnInit() {
        this.GFGCourse.getCourses().then((courses) => {
            this.courses = courses;
        });
    }

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

        this.gfg = 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 { }

• gfgCourseService.ts:

Javascript

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

@Injectable()
export class GFGCourse {
    constructor(private http: HttpClient) {}

    getCourses() {
        return this.http
            .get<any>("assets/courses.json")
            .toPromise()
            .then((res) => <any[]>res.data)
            .then((data) => {
                return data;
            });
    }
}

• courses.json:

Javascript

{
  "data": [
      { "name": "DSA Self Paced", "code": "AF" },
      { "name": "C++ STL", "code": "AX" },
      { "name": "System Design", "code": "AL" },
      { "name": "Web Development", "code": "DZ" },
      { "name": "Computer Subjects", "code": "AS" }
  ]
}

Output:

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