Angular PrimeNG Dynamic OverlayPanel 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. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Dynamic OverlayPanel Component.

OverlayPanel is a container component positioned as connected to its target. It appears normally when a button is clicked as a pop-up with some action to take as selecting an item and then closing it. It is said to be dynamic because it does not appear on the first mount but appears on interaction with the website. There are various components provided by the Angular PrimeNG, which are described below:

• OverlayPanel Show and Hide: The show method takes two parameters, the first one is the event that is required and the second target component to align the overlay is the event target. Similarly calling hide() hides the overlay panel and the toggle method toggles the visibility of the panel.
• OverlayPanel Dismissible and CloseIcon: If dismissible is set to true, clicking outside the panel closes it. If showCloseIcon is set to true, it displays a close icon at the top right corner to close the panel.
• OverlayPanel Animation Configuration: The Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties.
• OverlayPanel Properties:  The properties are used to configure the overlaypanel and suit different needs and appear as required.
• OverlayPanel Methods: The methods are used to perform some action on the component and display it accordingly. 
• OverlayPanel Events: The events are used to report the interactions that take place with the component and suitable actions can be taken.
• OverlayPanel Styling: Styling is used to override some default styles to match the theme of the site that we are working on. 
• OverlayPanel Templates: The templates are used to put some content on some pre-structured containers and we don’t need to modify much to suit different needs.

Syntax: Import the module:

import {OverlayPanelModule} from 'primeng/overlaypanel';

• Use it as follows:

<p-overlayPanel #op>
    <ng-template pTemplate>
        Welcome to GeeksforGeeks
    </ng-template>
</p-overlayPanel>

<button type="text" pButton label="Basic" 
        (click)="op.toggle($event)">
</button>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2:  After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

• Steps to run the application: Write the below command to run the application:

ng serve --open

Example 1: This example describes the basic usage of the Dynamic OverlayPanel Component in Angular PrimeNG, where we have an overlaypanel.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Dynamic OverlayPanel Component
</h3>

<p-button [label]="'Open Panel'"
          icon="pi pi-search"
          (click)="op.toggle($event)">
</p-button>

<p-overlayPanel #op [showCloseIcon]="true"
                    [style]="{ width: '450px' }">
    <ng-template pTemplate>
        Welcome to GeeksforGeeks
    </ng-template>
</p-overlayPanel>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { OverlayPanel } from 'primeng/overlaypanel';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    constructor(private messageService: MessageService) { }

    ngOnInit() { }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { OverlayPanelModule }
    from 'primeng/overlaypanel';
import { MessageService } from 'primeng/api';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        OverlayPanelModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [MessageService],
})
export class AppModule { }

Output:

Example 2: In the following example, we have a table by implementing the pagination with the OverlayPanel Component.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
           GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Dynamic OverlayPanel Component
</h3>
<br ><br>
<p-button [label]="'Overlay Panel'"
          icon="pi pi-search"
          (click)="op1.toggle($event)">
</p-button>

<p-overlayPanel #op1 [showCloseIcon]="true"
                     [style]="{ width: '450px' }">
    <p-table #dt [columns]="cols"
                 [value]="tutorials"
                 [paginator]="true"
                 [rows]="3"
                 responsiveLayout="scroll">
        <ng-template pTemplate="body"
                    let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{ rowData[col.field] }}
                </td>
            </tr>
        </ng-template>
    </p-table>
</p-overlayPanel>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { OverlayPanel } from 'primeng/overlaypanel';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    constructor(private messageService: MessageService) { }
    tutorials: Tutorial[];
    cols: any[];
    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];
        this.cols = [
            { field: 'title', header: 'Title' },
            { field: 'category', header: 'Category' },
            { field: 'rating', header: 'Rating' },
        ];
    }
}

export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { OverlayPanelModule }
    from 'primeng/overlaypanel';
import { MessageService } from 'primeng/api';
import { TableModule } from 'primeng/table';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    OverlayPanelModule,
    ButtonModule,
    TableModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [MessageService],
})
export class AppModule {}

Output:

Reference: https://www.primefaces.org/primeng/overlaypanel