Dropdown

import { Component } from '@angular/core';
import { WrDropdown, WrDropdownItem, WrDropdownMenu } from 'ngwr/dropdown';

@Component({ imports: [WrDropdown, WrDropdownItem, WrDropdownMenu] })
export class MyComponent {}

<wr-btn [wrDropdown]="menu" #actions="wrDropdown">Actions</wr-btn>
<wr-dropdown-menu #menu>
  <wr-dropdown-item>Copy</wr-dropdown-item>
</wr-dropdown-menu>

<!-- Anywhere else in the same template -->
<wr-btn (click)="actions.toggle()">Toggle from here</wr-btn>
@if (actions.isOpen()) {
  <span>The menu is up.</span>
}

<!-- The menu gets aria-labelledby="row-actions" -->
<button wr-btn type="button" id="row-actions" [wrDropdown]="menu">Actions</button>

<!-- Bound ids work too -->
<button wr-btn type="button" [id]="'actions-' + row.id" [wrDropdown]="menu">Actions</button>

import { CdkScrollable } from '@angular/cdk/scrolling';

@Component({
  imports: [CdkScrollable, WrDropdown, WrDropdownMenu, WrDropdownItem],
  template: `
    <div class="side-panel" cdkScrollable>
      <button wr-btn type="button" [wrDropdown]="menu">Actions</button>
    </div>
  `,
})
export class PanelComponent {}