Метод 1: использование ng-bootstrap

<!-- app.component.html -->
<button (click)="openPopup()">Open Popup</button>
<!-- popup.component.html -->
<div class="popup" *ngIf="isOpen">
  <button (click)="closePopup()">Close</button>
  <!-- Popup content goes here -->
</div>

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isOpen = false;
  openPopup() {
    this.isOpen = true;
  }
  closePopup() {
    this.isOpen = false;
  }
}

Метод 2: использование ng-bootstrap с TypeScript

<!-- app.component.html -->
<button (click)="open(content)">Open Popup</button>
<!-- popup.component.html -->
<ng-template #content let-modal>
  <div class="popup">
    <button (click)="modal.dismiss()">Close</button>
    <!-- Popup content goes here -->
  </div>
</ng-template>

// app.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}
  open(content) {
    this.modalService.open(content);
  }
}

Метод 3: использование диалогового окна Angular Material

<!-- app.component.html -->
<button (click)="openPopup()">Open Popup</button>
<!-- popup.component.html -->
<div class="popup">
  <button (click)="closePopup()">Close</button>
  <!-- Popup content goes here -->
</div>

// app.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopupComponent } from './popup.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}
  openPopup() {
    const dialogRef = this.dialog.open(PopupComponent);
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}