fix(dialog): Open from a trigger destroyed by the same click (#5344)

## Description

* A `lu-dropdown-action` opening a dialog no longer throws `NG0911`.
* The dialog closes again on backdrop click and Escape.

-----

* `provideLuDialog()` on `luDialogOpen` makes the service injector the
trigger's node injector.
* `lu-dropdown-action` disposes the panel on its own `(click)` before
`luDialogOpen` runs.
* `afterNextRender` then registers on the destroyed view and throws.
* The throw skips the backdrop and Escape close subscription.
* The new *Dropdown / Angular / Dialog* story covers the case.

Fixes #5342.

-----

### Contribution

- [x] Root cause of the bug is identified and understood
- [x] Bug is no longer reproducible
- [x] E2E test or UI diff is added if required
- [x] `npm run build` is OK
- [x] `npm run lint` is OK

### Functional review

- [x] UI diff is OK
- [x] All related impacted functionalities are manually tested and show
no regression

-----

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: fbasmaison-lucca

packages/ng/dialog/dialog.service.ts

@@ -1,6 +1,6 @@
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { Overlay } from '@angular/cdk/overlay';
-import { afterNextRender, inject, Injectable, Injector, Renderer2 } from '@angular/core';
+import { afterNextRender, EnvironmentInjector, inject, Injectable, Injector, Renderer2 } from '@angular/core';
 import { isObservable, merge, of, take } from 'rxjs';
 import { filter, switchMap, takeUntil } from 'rxjs/operators';
 import { LuDialogConfig, LuDialogData, LuDialogRef, LuDialogResult } from './model';
@@ -14,6 +14,8 @@ export class LuDialogService {
 
 	#injector = inject(Injector);
 
+	#environmentInjector = inject(EnvironmentInjector);
+
 	open<C, TData = LuDialogData<C>>(config: LuDialogConfig<C, NoInfer<TData>>): LuDialogRef<C, TData> {
 		// Assigned synchronously inside the `providers` callback below, which CDK calls during `Dialog.open()`.
 		let luDialogRef!: LuDialogRef<C, TData>;
@@ -69,7 +71,9 @@ export class LuDialogService {
 
 		// Re-check once the view is stable: block strategy only locks scroll if the page already
 		// overflows at attach time, which can miss for dialogs opened asynchronously (e.g. via a route).
-		afterNextRender(() => scrollStrategy.enable(), { injector: this.#injector });
+		// With `provideLuDialog()` on a directive, `#injector` is the trigger's node injector.
+		// A `lu-dropdown-action` trigger is already destroyed by this click: `afterNextRender` on it would throw `NG0911`.
+		afterNextRender(() => scrollStrategy.enable(), { injector: this.#environmentInjector });
 
 		if (cdkRef.componentRef) {
 			const renderer = cdkRef.componentRef.injector.get(Renderer2);

stories/documentation/overlays/dropdown/angular/dropdown-dialog.stories.ts

@@ -0,0 +1,55 @@
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { configureLuDialog, DialogComponent, DialogContentComponent, DialogOpenDirective } from '@lucca-front/ng/dialog';
+import { DropdownActionComponent, DropdownItemComponent, DropdownMenuComponent, LuDropdownTriggerDirective } from '@lucca-front/ng/dropdown';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular-vite';
+import { createTestStory } from '@/helpers/stories';
+import { waitForAngular } from '@/helpers/test';
+import { expect, screen, userEvent, within } from 'storybook/test';
+
+export default {
+	title: 'Documentation/Overlays/Dropdown/Angular/Dialog',
+	decorators: [
+		applicationConfig({ providers: [configureLuDialog()] }),
+		moduleMetadata({
+			imports: [ButtonComponent, LuDropdownTriggerDirective, DropdownMenuComponent, DropdownItemComponent, DropdownActionComponent, DialogOpenDirective, DialogComponent, DialogContentComponent],
+		}),
+	],
+} as Meta;
+
+export const Dialog: StoryObj = {
+	render: () => ({
+		template: `<button type="button" luButton disclosure [luDropdown]="dropdownSample">Dropdown</button>
+<ng-template #dropdownSample>
+	<lu-dropdown-menu>
+		<lu-dropdown-item>
+			<button lu-dropdown-action type="button" [luDialogOpen]="dialogTpl">Open dialog</button>
+		</lu-dropdown-item>
+	</lu-dropdown-menu>
+</ng-template>
+<ng-template #dialogTpl>
+	<lu-dialog>
+		<lu-dialog-content>Backdrop click and Escape close this dialog.</lu-dialog-content>
+	</lu-dialog>
+</ng-template>`,
+	}),
+};
+
+export const DialogTEST = createTestStory(Dialog, async ({ canvasElement, step }) => {
+	await waitForAngular();
+	const trigger = within(canvasElement).getByRole('button', { name: /dropdown/i });
+
+	await step('Opens the dialog from the dropdown action', async () => {
+		await userEvent.click(trigger);
+		await waitForAngular();
+		await userEvent.click(screen.getByRole('button', { name: /open dialog/i }));
+		await waitForAngular();
+		await expect(screen.getByRole('dialog')).toBeVisible();
+		await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+	});
+
+	await step('Closes the dialog with Escape', async () => {
+		await userEvent.keyboard('{Escape}');
+		await waitForAngular();
+		await expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+	});
+});