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;" >w3wiki</ 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;" >w3wiki</ 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
Contact Us