Drawer

import { Component } from '@angular/core';
import { WR_DRAWER_DATA, WrDrawer, WrDrawerClose, WrDrawerContent, WrDrawerFooter, WrDrawerManager, WrDrawerRef, WrDrawerTitle } from 'ngwr/drawer';

@Component({ imports: [WrDrawer, WrDrawerClose, WrDrawerContent, WrDrawerFooter, WrDrawerTitle] })
export class MyComponent {}

<wr-btn (click)="open.set(true)">Open</wr-btn>

<wr-drawer [(open)]="open" position="right" width="22rem">
  <h2 wrDrawerTitle>Settings</h2>
  <div wrDrawerContent>…</div>
  <div wrDrawerFooter>
    <wr-btn wrDrawerClose>Close</wr-btn>
    <wr-btn color="primary" wrDrawerClose>Save</wr-btn>
  </div>
</wr-drawer>

<wr-drawer [(open)]="open" [hasBackdrop]="false" width="18rem">
  <h2 wrDrawerTitle>Details</h2>
  <div wrDrawerContent>…</div>
</wr-drawer>

import { WrDrawerManager } from 'ngwr/drawer';

export class Inbox {
  private readonly drawers = inject(WrDrawerManager);

  async openChat(threadId: string): Promise<void> {
    const ref = this.drawers.open<ChatComponent, string, ChatData>(ChatComponent, {
      data: { thread: threadId },
      position: 'right',
      width: '24rem',
    });

    const sent = await ref.awaitClose(); // string | undefined
  }
}

import { WR_DRAWER_DATA, WrDrawerRef } from 'ngwr/drawer';

@Component({...})
export class ChatComponent {
  protected readonly data = inject<ChatData>(WR_DRAWER_DATA);
  private readonly ref = inject<WrDrawerRef<ChatComponent, string>>(WrDrawerRef);

  send(): void {
    this.store.send(this.draft());
    this.ref.close('sent');
  }
}

<wr-drawer [(open)]="open" position="right">
  <h2 wrDrawerTitle>Filters</h2>
  <div wrDrawerContent>
    <wr-form-field label="Search">
      <input wrInput cdkFocusInitial [value]="query()" (input)="onQuery($event)" />
    </wr-form-field>
  </div>
</wr-drawer>