Translating Component Function to Angular

[JJURIZ]

Good afternoon,
I'm struggling to implement functionality on the components in Angular. I suspect there's something elementary I'm missing.
The Dialog component might be a good example to demonstrate what I'm referring to. Specifically implementing the Open/Close click functionality. How do I go about translating the script in Angular?

<sl-dialog label="Dialog" class="dialog-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <sl-button slot="footer" type="primary">Close</sl-button>
</sl-dialog>

<sl-button>Open Dialog</sl-button>

<script>
  const dialog = document.querySelector('.dialog-overview');
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector('sl-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
</script>

For a moment I thought I could wire up the .show() method directly to the open button but Angular doesn't recognize .show() as a valid method.
My apologies if this description is confusing. I'll be happy to answer any clarifying questions.
Thank you.

[claviska]

I don't use Angular, but you can also bind to the dialog's open prop if that helps.

[JJURIZ]

Thanks for the quick response!
It seems like it should work but it's not and I assume this is Angular related. I added [open]="true" (see below)

<sl-dialog #dialog label="Dialog" class="dialog-no-overlay-dismiss" [open]="true">

but nothing happens. Including the property as

open="true" 

or

open="false"

disregards the boolean value and opens the dialog on page load.
If any Angular devs out there can advise I'd appreciate it.