How to create popup in angular with 5 different ways step by step

Certainly! Let’s explore five different ways to create a popup in Angular:

Method 1: Using Angular Material Dialog

Step 1: Install Angular Material:

ng add @angular/material

Step 2: Create a Dialog Component:

ng generate component my-dialog

Step 3: Use MatDialog in Your Component:

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@Component({
  selector: 'app-root',
  template: 'Open Dialog',
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(MyDialogComponent, {
      width: '250px',
      data: { /* any data you want to pass to the dialog component */ }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed with result:', result);
    });
  }
}

Method 2: Using Angular CDK Overlay

Step 1: Import OverlayModule and PortalModule in AppModule:

import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';

@NgModule({
  imports: [
    OverlayModule,
    PortalModule,
    // other modules
  ],
  // ...
})
export class AppModule { }

Step 2: Create a Popup Service:

import { Injectable } from '@angular/core';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { MyPopupComponent } from './my-popup/my-popup.component';

@Injectable({
  providedIn: 'root',
})
export class PopupService {
  constructor(private overlay: Overlay) {}

  open() {
    const overlayConfig: OverlayConfig = {
      hasBackdrop: true,
      backdropClass: 'popup-backdrop',
    };

    const overlayRef = this.overlay.create(overlayConfig);
    const portal = new ComponentPortal(MyPopupComponent);

    overlayRef.attach(portal);

    overlayRef.backdropClick().subscribe(() => overlayRef.detach());
  }
}

Step 3: Use Popup Service in Your Component:

import { Component } from '@angular/core';
import { PopupService } from './popup.service';

@Component({
  selector: 'app-root',
  template: 'Open Popup',
})
export class AppComponent {
  constructor(private popupService: PopupService) {}

  openPopup() {
    this.popupService.open();
  }
}

Method 3: Using ng-bootstrap

Step 1: Install ng-bootstrap:

npm install @ng-bootstrap/ng-bootstrap

Step 2: Import NgbModalModule in AppModule:

import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    NgbModalModule,
    // other modules
  ],
  // ...
})
export class AppModule { }

Step 3: Use NgbModal in Your Component:

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyPopupComponent } from './my-popup/my-popup.component';

@Component({
  selector: 'app-root',
  template: 'Open Popup',
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

  openPopup() {
    const modalRef = this.modalService.open(MyPopupComponent);
    // handle modal events, if needed
  }
}

Method 4: Using PrimeNG Dialog

Step 1: Install PrimeNG:

npm install primeng

Step 2: Import DialogModule in AppModule:

import { DialogModule } from 'primeng/dialog';

@NgModule({
  imports: [
    DialogModule,
    // other modules
  ],
  // ...
})
export class AppModule { }

Step 3: Use p-dialog in Your Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
    
      
    
  `,
})
export class AppComponent {
  display: boolean = false;

  showDialog() {
    this.display = true;
  }
}

Method 5: Using Angular CDK Portal

Step 1: Import PortalModule in AppModule:

import { PortalModule } from '@angular/cdk/portal';

@NgModule({
  imports: [
    PortalModule,
    // other modules
  ],
  // ...
})
export class AppModule { }

Step 2: Create a Portal Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-portal-popup',
  template: '
Portal Popup Content
',
})
export class PortalPopupComponent {}

Step 3: Use PortalHostDirective in Your Component:

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { Portal } from '@angular/cdk/portal';
import { PortalPopupComponent } from './portal-popup/portal-popup.component';

@Component({
  selector: 'app-root',
  template: '
Open Portal',
})
export class AppComponent {
  @ViewChild('portalHost', { read: ViewContainerRef }) portalHost: ViewContainerRef;

  openPortal() {
    const portal: Portal = new ComponentPortal(PortalPopupComponent);
    this.portalHost.clear();
    this.portalHost.createEmbeddedView(portal);
  }
}

Choose the method that best fits your project requirements and preferences. Each method has its own set of features and flexibility.