Angular PrimeNG Dynamic OverlayPanel Events

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 Events

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. Angular PrimeNG provides different events, like onShow and onHide, that help to create the Overlay Panel. The events are used to report the interactions that take place with the component and suitable actions can be taken.

Angular PrimeNG Dynamic OverlayPanel Events:

• onShow: This is used for Callback to invoke when an overlay becomes visible.
• onHide: This is used for Callback to invoke after the overlay gets hidden.

Syntax:

• Import the module:

import {OverlayPanelModule} from 'primeng/overlaypanel';

• Use it as follows:

<p-overlayPanel #op (event)=function()>
   <ng-template pTemplate>
       ....
   </ng-template>
</p-overlayPanel>

<button type="text" pButton label="..." 
    (click)="....">
</button>

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

ng serve --save

Example 1: Below is the example code that illustrates the use of Angular PrimeNG OverlayPanel Events, where we will learn about onShow event.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">
          GeeksforGeeks
      </h1>
    <h2>
          Angular PrimeNG Dynamic OverlayPanel Events
      </h2>
    <p-button [label]="'Open Panel'"
              icon="pi pi-search"
              (click)="op.toggle($event)">
    </p-button>

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

• 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) { }
    onShow() {
        alert("Hi Geek!! onShow  event occurs");
    }
    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: Below is another example code that illustrates the use of Angular PrimeNG OverlayPanel Events, where we will learn about onHide event.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">
          GeeksforGeeks
      </h1>
    <h2>
          Angular PrimeNG Dynamic OverlayPanel Events
      </h2>
    <p-button [label]="'Open Panel'"
              icon="pi pi-search"
              (click)="op.toggle($event)">
    </p-button>

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

• 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) { }
    onHide() {
        alert("Hi Geek!! onHide  event occurs");
    }
    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:

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