ERRO TypeError: Não é possível ler propriedades de nulo (lendo 'offsetHeight') no primeng MenuModule

Você deve esperar até que o Angular termine de renderizar os novos dados do modelo antes de alternar o menu. Use setTimeout, NgZone.run ou, melhor ainda, a lógica AfterNextRender para adiar a chamada até que a visualização esteja estável. Veja como você pode corrigir isso:

import { ChangeDetectorRef, ViewChild, inject } from '@angular/core';
import { Menu } from 'primeng/menu';
import { signal } from '@angular/core';

export class YourComponent {
  @ViewChild('menu') menu!: Menu;
  listStatusTypes = signal<any[]>([]);
  cdRef = inject(ChangeDetectorRef);

  statusDispacherClick(data: any, event: MouseEvent) {
    this.service.getDashboardChangeStatusTypes(data).subscribe(dataService => {
      dataService.map(x => {
        x.label = x.title;
      });
      this.listStatusTypes.set(dataService);

      // Wait for view update
      this.cdRef.detectChanges();

      // Allow DOM to update before toggle
      setTimeout(() => {
        this.menu.toggle(event);
      }, 0);
    });
  }
}

Por que setTimeout(() => ..., 0) funciona: Ele envia a chamada toggle() para o final do loop de eventos JavaScript atual, permitindo que o Angular atualize a visualização e renderize o DOM completamente antes de tentar acessar offsetHeight.

Se você estiver usando @angular/core v16+ com sinais e estiver fazendo renderização de interface de usuário reativa, considere envolver sua lógica baseada em sinais em um effect() e controlar quando chamar menu.toggle() marcando menu?.el.

Parece um bug, acontece apenas quando não mostramos o menu imediatamente.

Se eu abrir o menu antes da chamada da API ser feita, não há problema.

Como solução alternativa, podemos mostrar um indicador de carregamento, que está desabilitado, depois abrir o menu e fazer a chamada à API.

statusDispacherClick(data, event) {
    this.listStatusTypes.set([
    { label: 'Loading...', icon: 'pi pi-spin pi-spinner', disabled: true },
    ]);
    this.menu.toggle(event);
    console.log(data, event);
    this.service.getDashboardChangeStatusTypes(data).subscribe((data) => {
    const transformedData = data.map((x: any) => {
        x.label = x.title;
        return x;
    });
    this.listStatusTypes.set(transformedData);
    });
}

Código completo:

TS:

import {
Component,
OnInit,
signal,
ViewChild,
inject,
Injectable,
ChangeDetectorRef,
} from '@angular/core';
import { ImportsModule } from './imports';
import { MenuItem } from 'primeng/api';
import { Menu } from 'primeng/menu';
import { of, delay } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DashboardService {
getDashboardChangeStatusTypes(data: any) {
    return of([
    { title: 'New', icon: 'pi pi-plus' },
    { title: 'Search', icon: 'pi pi-search' },
    ]).pipe(delay(2000));
}
}

@Component({
selector: 'menu-basic-demo',
templateUrl: './menu-basic-demo.html',
standalone: true,
imports: [ImportsModule],
})
export class MenuBasicDemo {
service = inject(DashboardService);
cdRef = inject(ChangeDetectorRef);
@ViewChild('menu', {
    read: Menu,
})
menu!: Menu;
listStatusTypes = signal<any[]>([]);

    statusDispacherClick(data, event) {
        this.listStatusTypes.set([
        { label: 'Loading...', icon: 'pi pi-spin pi-spinner', disabled: true },
        ]);
        this.menu.toggle(event);
        console.log(data, event);
        this.service.getDashboardChangeStatusTypes(data).subscribe((data) => {
        const transformedData = data.map((x: any) => {
            x.label = x.title;
            return x;
        });
        this.listStatusTypes.set(transformedData);
        });
    }
}

HTML:

<h1 (click)="statusDispacherClick(213 , $event)">
Status Click
</h1>
<p-menu #menu [model]="listStatusTypes()" [popup]="true" />

Demonstração do Stackblitz