PrimeNG p-dialog modal non-responsive

Question

I am using a PrimeNG p-dialog control:

<p-dialog
  header="Theme Selector"
  [modal]="true"
  [visible]="someBoolean"
  [closeOnEscape]="true"
  [closable]="true">

We use these all over the system in a similar manner and they work fine. This particular one sits in app.component.html and while it renders fine, and shows the "close" button, it is non-responsive.

Clicking the close icon does nothing, attaching events to (onHide) don't fire, and even if you place a button in it, the button's events don't fire.

I'm lost, any help is greatly appreciated.

Answer 1

If anyone else experiences this, make sure to triple check your Angular property and event bindings.

This was due to binding [visible] and not [(visible)].