Angular PrimeNG Form AutoComplete Styling 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 know about Angular PrimeNG Form AutoComplete Styling Component.

The Form AutoComplete Styling Component contains various styling classes that can be utilized to include the structural style to the Form Component. This component helps to make the interactive Form AutoComplete by implementing the different stylings provided by Angular PrimeNG.

Angular PrimeNG Form AutoComplete Styling:

• p-autocomplete: This is used for the  Container element
• p-autocomplete-panel: This is used for the Overlay panel of suggestions.
• p-autocomplete-items: This is used for the List container of suggestions.
• p-autocomplete-item: This is used for the List item of a suggestion.
• p-autocomplete-token: This is used for the Element of a selected item in multiple modes.
• p-autocomplete-token-icon: This is used for the Close icon element of a selected item in multiple modes.
• p-autocomplete-token-label: This is used for the Label of a selected item in multiple modes.
• p-autocomplete-loader: This is used for the Loader icon.

Syntax:

<p-autoComplete [(ngModel)]="..." 
   [suggestions]="..." 
   field="...">
</p-autoComplete>

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 code to see the output

ng serve --save

Example 1: Below is the basic example code that illustrates the use of Angular PrimeNG Form AutoComplete Styling Component.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>
          Angular PrimeNG Form AutoComplete
          Styling Component
      </h2>
    <p-autoComplete styleClass="myClass"
        [(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 { FilterService } from "primeng/api";

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

export class AppComponent {
    countries: any[] = [];
    filteredCountries: any[] = [];

    data: any[] = [
        { name: "Afghanistan", code: "AF" },
        { name: "Åland Islands", code: "AX" },
        { name: "Albania", code: "AL" },
        { name: "Algeria", code: "DZ" },
        { name: "American Samoa", code: "AS" },
        { name: "Andorra", code: "AD" },
        { name: "Angola", code: "AO" }
    ];

    ngOnInit() {
        this.countries = this.data;
    }

    filterCountry(event: any) {
        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 {}

• app.component.css:

CSS

:host ::ng-deep .myClass{
    border: 2px solid red;
    box-shadow: 6px 8px #888888;
}

Output:

Example 2: Below is another example code that illustrates the use of Angular PrimeNG Form AutoComplete Styling Component.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>
        Angular PrimeNG Form AutoComplete
          Styling Component
      </h2>
    <p-autoComplete
        [(ngModel)]="selectedCountryAdvanced"
        [suggestions]="filteredCountries"
        (completeMethod)="filterCountry($event)"
        field="name"
        [dropdown]="true"
        [multiple]="true">
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <div class="myClass">{{ country.name }}</div>
            </div>
        </ng-template>
    </p-autoComplete>
</div>

• app.component.ts:

Javascript

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

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

export class AppComponent {
    countries: any[] = [];
    filteredCountries: any[] = [];

    data: any[] = [
        { name: "Afghanistan", code: "AF" },
        { name: "Åland Islands", code: "AX" },
        { name: "Albania", code: "AL" },
        { name: "Algeria", code: "DZ" },
        { name: "American Samoa", code: "AS" },
        { name: "Andorra", code: "AD" },
        { name: "Angola", code: "AO" }
    ];

    ngOnInit() {
        this.countries = this.data;
    }

    filterCountry(event: any) {
        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 {}

• app.component.css:

CSS

:host ::ng-deep .myClass{
    border: 2px solid red;
    box-shadow: 6px 8px #888888;
}

Output:

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