Dropdown

Component wrapper for Oat dropdowns. Mark a [trigger] child to wire automatic popover toggling.

APITypeDescription
isOpen()Signal<boolean>Current open state
openChangeOutputEmitter<boolean>Fires when the dropdown opens or closes
open()methodOpen the dropdown
close()methodClose the dropdown
toggle()methodToggle the dropdown

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatDropdownComponent } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatDropdownComponent],
  template: `
    <ng-oat-dropdown #dd (openChange)="onToggle($event)">
      <button trigger class="outline">Menu ▾</button>
      <button role="menuitem">Profile</button>
      <button role="menuitem">Settings</button>
      <button role="menuitem">Logout</button>
    </ng-oat-dropdown>
  `,
})
export class ExampleComponent {
  onToggle(open: boolean) {
    console.log('Dropdown', open ? 'opened' : 'closed');
  }
}

Basic Dropdown

State: Closed

html
<ng-oat-dropdown #dd (openChange)="onToggle($event)">
  <button trigger class="outline">Open menu ▾</button>
  <button role="menuitem">Profile</button>
  <button role="menuitem">Settings</button>
  <button role="menuitem">Logout</button>
</ng-oat-dropdown>

<p>State: {{ dd.isOpen() ? 'Open' : 'Closed' }}</p>

Programmatic Control

html
<ng-oat-dropdown #dd2>
  <button trigger class="outline">Controlled ▾</button>
  <button role="menuitem">Alpha</button>
  <button role="menuitem">Beta</button>
</ng-oat-dropdown>

<button (click)="dd2.open()">Open</button>
<button (click)="dd2.close()">Close</button>
<button (click)="dd2.toggle()">Toggle</button>

Event Log