goetzrobin / spartan

Cutting-edge tools powering Angular full-stack development.
https://spartan.ng
MIT License
1.09k stars 120 forks source link

RFC: Expose outputs closed and opened for brnMenuTriggerFor directive #319

Open wandri opened 1 week ago

wandri commented 1 week ago

Which scope/s are relevant/related to the feature request?

menu

Information

Request: Expose outputs closed and opened for brnMenuTriggerFor directive

Use case: I need to know the state of my menu in order to design my button accordingly.

Example:

readonly activeButton = signal<boolean>(false)
<button [brnMenuTriggerFor]="menu"
                (close)="activeButton.set(false)" 
                (click)="activeButton.set(!activeButton())"
                [ngClass]="{
                     'hover:bg-blue-50':!activeButton(),
                     'bg-white':activeButton(),
                 }">
         my button
</button>

This API is already available with CdkMenuTrigger.

@Directive({
    selector: '[brnMenuTriggerFor]',
    standalone: true,
    hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: brnMenuTriggerFor'] }],
})
export class BrnMenuTriggerDirective {
    private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
        ...
    readonly closed = this._cdkTrigger.closed; // output closed from _cdkTrigger
    readonly opened = this._cdkTrigger.closed; // output opened from _cdkTrigger
       ...

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue