PrimeNG tutorial with examples using frequently used classes

-

 

PrimeNG Tutorial: Frequently Used Classes and Components

PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles.

In this tutorial, we will explore some of the frequently used components and classes in PrimeNG, along with examples for creating interactive, modern, and responsive UIs.

1. Setting Up PrimeNG

Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps:

Step 1: Install PrimeNG and PrimeIcons

Run the following commands to install PrimeNG and PrimeIcons:

bash
npm install primeng
npm install primeicons

Step 2: Import Required Modules

After installation, you need to import the relevant PrimeNG modules in your app.module.ts.

Example of importing commonly used modules:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Import PrimeNG modules
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { CardModule } from 'primeng/card';
import { TableModule } from 'primeng/table';
import { DialogModule } from 'primeng/dialog';
import { ToastModule } from 'primeng/toast';
import { MessageService } from 'primeng/api';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ButtonModule,
    InputTextModule,
    CardModule,
    TableModule,
    DialogModule,
    ToastModule
  ],
  providers: [MessageService],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Frequently Used PrimeNG Components

Here are examples of some of the most commonly used PrimeNG components:

2.1 Button (p-button)

PrimeNG's p-button component is used to create buttons with a variety of styles.

html
<!-- Basic Button -->
<p-button label="Click Me"></p-button>

<!-- Icon Button -->
<p-button icon="pi pi-check" label="Accept"></p-button>

<!-- Primary Button with style -->
<p-button label="Primary" icon="pi pi-save" styleClass="p-button-primary"></p-button>

<!-- Button with Badge -->
<p-button label="Notifications" icon="pi pi-bell" [badge]="5" badgeStyleClass="p-badge-success"></p-button>

2.2 InputText (p-inputText)

The p-inputText component is used for creating input fields in forms.

html
<!-- Simple Input Text -->
<input pInputText placeholder="Enter your name">

<!-- Input with Icon -->
<p-inputText icon="pi pi-user" placeholder="Username"></p-inputText>

<!-- Input with clear icon -->
<p-inputText [(ngModel)]="value" placeholder="Enter something"></p-inputText>

2.3 Card (p-card)

The p-card component is used to create styled cards that can contain images, headers, footers, and other content.

html
<p-card header="Card Title" [style]="{'width':'300px'}">
  <p>Content inside the card</p>
  <p-footer>
    <p-button label="Go to website" icon="pi pi-external-link" class="p-button-text"></p-button>
  </p-footer>
</p-card>

2.4 DataTable (p-table)

The p-table is one of the most powerful components in PrimeNG. It is used for displaying tabular data with support for sorting, filtering, pagination, and more.

html
<p-table [value]="cars" [paginator]="true" [rows]="10" [sortMode]="'multiple'">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="vin">Vin <p-sortIcon field="vin"></p-sortIcon></th>
      <th pSortableColumn="year">Year <p-sortIcon field="year"></p-sortIcon></th>
      <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
      <th pSortableColumn="color">Color <p-sortIcon field="color"></p-sortIcon></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td>{{ car.vin }}</td>
      <td>{{ car.year }}</td>
      <td>{{ car.brand }}</td>
      <td>{{ car.color }}</td>
    </tr>
  </ng-template>
</p-table>

In your component (app.component.ts):

typescript
export class AppComponent {
  cars = [
    { vin: 'A123', year: 2015, brand: 'Toyota', color: 'Red' },
    { vin: 'B456', year: 2017, brand: 'Honda', color: 'Blue' },
    { vin: 'C789', year: 2018, brand: 'Ford', color: 'Green' },
    // More data...
  ];
}

2.5 Dialog (p-dialog)

The p-dialog component is used to create modal dialogs.

html
<p-button label="Show Dialog" icon="pi pi-info-circle" (click)="showDialog()"></p-button>

<p-dialog header="Information" [(visible)]="display" [modal]="true" [closable]="false">
  <p>This is a simple dialog.</p>
  <p-footer>
    <p-button label="Close" icon="pi pi-times" (click)="closeDialog()"></p-button>
  </p-footer>
</p-dialog>

In your component (app.component.ts):

typescript
export class AppComponent {
  display: boolean = false;

  showDialog() {
    this.display = true;
  }

  closeDialog() {
    this.display = false;
  }
}

2.6 Toast (p-toast)

The p-toast component is used for showing global notifications, usually displayed at the top of the page.

html
<p-toast></p-toast>
<p-button label="Show Success" icon="pi pi-check" (click)="showSuccess()"></p-button>

In your component (app.component.ts):

typescript
import { MessageService } from 'primeng/api';

export class AppComponent {
  constructor(private messageService: MessageService) {}

  showSuccess() {
    this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Operation completed successfully' });
  }
}

3. Styling and Customization

PrimeNG components come with default styles, but you can easily customize the look and feel of the components by using CSS classes and custom styles.

3.1 Custom Classes

For example, you can use custom classes to style a button:

html
<p-button label="Custom Styled Button" styleClass="custom-btn"></p-button>

In your styles.css:

css
.custom-btn {
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
}

3.2 Global Styles

You can also modify the overall theme of PrimeNG by customizing the included CSS files. PrimeNG supports several themes like nova-light, omega, saga, and luna. You can import these themes into your angular.json file:

json
"styles": [
  "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "src/styles.css"
]

4. Conclusion

PrimeNG is a powerful and flexible UI component library that provides many pre-built, customizable components for Angular applications. In this tutorial, we have explored some of the most frequently used PrimeNG components such as:

  • p-button: For buttons
  • p-inputText: For input fields
  • p-card: For card-based layouts
  • p-table: For data tables with sorting and pagination
  • p-dialog: For modal dialogs
  • p-toast: For global notifications

To explore more components and learn about advanced features, check out the official PrimeNG documentation.

Comments

Post a Comment

Popular posts from this blog

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more