Метод 1: ng-bootstrap
Один из самых простых способов создания всплывающих меню в Angular — использование ng-bootstrap, мощного набора компонентов Angular, основанного на Bootstrap. С помощью ng-bootstrap вы можете быстро реализовать всплывающие меню с минимальным количеством кода. Вот пример:

<button type="button" class="btn btn-primary" ngbDropdown>
  Open Menu
</button>
<div ngbDropdownMenu>
  <button class="dropdown-item">Option 1</button>
  <button class="dropdown-item">Option 2</button>
  <button class="dropdown-item">Option 3</button>
</div>

Метод 2: пользовательский компонент с ngIf
Другой подход — создать пользовательский компонент с помощью директивы ngIf Angular. Этот метод дает вам больше контроля над внешним видом и поведением всплывающего меню. Вот пример:

<button (click)="toggleMenu()">Open Menu</button>
<div *ngIf="isMenuOpen" class="popup-menu">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

// component.ts
export class AppComponent {
  isMenuOpen = false;
  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }
}

Метод 3: Диалог материала Angular
Если вы используете Angular Material в своем проекте, вы можете использовать его компонент Dialog для создания всплывающих меню. Компонент Dialog предоставляет настраиваемое наложение с различными встроенными функциями. Вот пример:

import { MatDialog } from '@angular/material/dialog';
@Component({...})
export class AppComponent {
  constructor(private dialog: MatDialog) {}
  openDialog() {
    const dialogRef = this.dialog.open(MyDialogComponent);
  }
}

Метод 4: CSS и JavaScript
Для более расширенной настройки вы можете создавать всплывающие меню с помощью CSS и JavaScript. Этот метод дает вам полный контроль над дизайном и поведением всплывающего меню. Вот упрощенный пример:

<button onclick="toggleMenu()">Open Menu</button>
<div id="popup-menu" class="popup-menu">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>
<script>
  function toggleMenu() {
    const menu = document.getElementById('popup-menu');
    menu.classList.toggle('show');
  }
</script>
<style>
  .popup-menu {
    display: none;
  }
  .popup-menu.show {
    display: block;
  }
</style>

В этой статье мы рассмотрели несколько методов создания всплывающих меню в Angular. Мы рассмотрели использование ng-bootstrap, создание пользовательских компонентов с помощью ngIf, использование диалога материалов Angular и реализацию всплывающих меню с помощью CSS и JavaScript. Включив эти методы в свои проекты Angular, вы сможете улучшить взаимодействие с пользователем и создать более интерактивные пользовательские интерфейсы. Так что смело начинайте добавлять всплывающие меню в свои приложения уже сегодня!