I have a button on my website which is meant to open a PrimeNG popup menu when clicked. I plan to change the design of only that button later. However, nothing happens when I click it.

The menu shows up without the button.

Why is this?

app.component.html

<div class = "background">
    <div id = pLogo>
      <img src = "../assets/petronas-logo-dark.svg" width="30%" height="30%" alt="Petronas">
    </div>
    <div id = BurgerMenu>
      <p-menu #menu [model]="items" [popup]="true" />
      <p-button (onClick)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>
    </div>
</div>

app.component.ts

:host ::ng-deep .p-button { 
    background-color: #00a19c;
    border-color: #00a19c;
    font-family: "Museo Sans 900", Arial, sans-serif !important;
    font-size: 1.5vw;
}

:host ::ng-deep .p-button:hover { 
    background-color: #00928d;
    border-color: #00928d;
    font-family: "Museo Sans 900", Arial, sans-serif !important;
    font-size: 1.5vw;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonModule } from 'primeng/button';
import { DividerModule } from 'primeng/divider';
import { RippleModule } from 'primeng/ripple';
import { CommonModule } from '@angular/common';
import { MenuModule } from 'primeng/menu';
import { ToastModule } from 'primeng/toast';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { MenuItem, MessageService } from 'primeng/api';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ButtonModule, DividerModule, RippleModule, CommonModule, MenuModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

export class AppComponent implements OnInit{
  title = 'login_app';
  LoadingStatus = true
  items!: MenuItem[];

  ngOnInit(): void {
    setTimeout(() => {
        this.LoadingStatus = false;  // Remove the loading screen after the animation
      }, 2000);
    this.items = [
            {
                label: 'Options',
                items: [
                    {
                        label: 'Refresh',
                        icon: 'pi pi-refresh'
                    },
                    {
                        label: 'Export',
                        icon: 'pi pi-upload'
                    }
                ]
            }
        ];  
    }
  }

Thank you!