Using PrimeNG Input and Dropdown Components in Angular

Step 1: PrimeNG Input Component

The pInputText component is one of the simplest components provided by PrimeNG. It allows you to create basic input fields with a sleek design.

Example: In your Angular component, first, import the InputTextModule in your module (e.g., app.module.ts):

import { InputTextModule } from 'primeng/inputtext';

@NgModule({
  imports: [
    InputTextModule
  ]
})
export class AppModule { }

Then, in your HTML file (e.g., app.component.html), you can use the pInputText like this:

<h3>Input Field</h3>
<input pInputText type="text" placeholder="Enter your name">

The pInputText directive applies PrimeNG's styling to the input field, making it visually appealing and user-friendly.

Step 2: PrimeNG Dropdown Component

The pDropdown component is another widely used UI element. It helps users select an option from a dropdown menu, which can be populated with dynamic data.

Example: First, import the DropdownModule in your module file:

import { DropdownModule } from 'primeng/dropdown';

@NgModule({
  imports: [
    DropdownModule
  ]
})
export class AppModule { }

In your component file (e.g., app.component.ts), you can define the options for the dropdown:

export class AppComponent {
  cities: any[];

  constructor() {
    this.cities = [
      { label: 'New York', value: 'NY' },
      { label: 'Rome', value: 'RM' },
      { label: 'London', value: 'LDN' },
      { label: 'Istanbul', value: 'IST' },
      { label: 'Paris', value: 'PRS' }
    ];
  }
}

Next, in your HTML file, you can bind this array to the pDropdown component:

<h3>Select a City</h3>
<p-dropdown [options]="cities" placeholder="Select a city"></p-dropdown>

This will create a dropdown menu where users can choose a city from the list.

Step 3: Adding FormControl for Input and Dropdown

To make the input and dropdown work with Angular forms, you can bind them to FormControl or ngModel.

For the input:

<input pInputText type="text" [(ngModel)]="name" placeholder="Enter your name">

For the dropdown:

<p-dropdown [(ngModel)]="selectedCity" [options]="cities" placeholder="Select a city"></p-dropdown>

In your component:

export class AppComponent {
  name: string;
  selectedCity: string;
  
  cities: any[] = [
    { label: 'New York', value: 'NY' },
    { label: 'Rome', value: 'RM' },
    { label: 'London', value: 'LDN' },
    { label: 'Istanbul', value: 'IST' },
    { label: 'Paris', value: 'PRS' }
  ];
}

Conclusion:

By using PrimeNG’s input and dropdown components, you can easily enhance your Angular application’s user interface. These components are highly customizable and integrate seamlessly with Angular forms, making development faster and more efficient.