Get Angular Injector in Storybook 7+ `play` function

get-storybook-injector.ts

import { Injector } from '@angular/core';
import { getStorybookNg } from './get-storybook-ng';

/**
 * Get root-level injector for a component story.
 * 
 * @example
 * play: ({ canvasElement }) = {
 *   const injector = getStorybookInjector(canvasElement);
 * 
 *   runInInjectionContext(injector, () => {
 *     const myService = inject(MyService);
 *   });
 * }
 */
export function getStorybookInjector(canvasElement: HTMLElement): Injector {
	const rootElement = canvasElement.querySelector('[ng-version]');

	if (rootElement === null) {
		throw new Error(
			'Could not resolve Angular root element in the component story'
		);
	}

	const ng = getStorybookNg(canvasElement);

	return ng.getInjector(rootElement);
}

get-storybook-ng.ts

import { ɵGlobalDevModeUtils } from '@angular/core';
import { getStorybookWindow } from './get-storybook-window';

export function getStorybookNg(
	canvasElement: HTMLElement
): ɵGlobalDevModeUtils['ng'] {
	const storybookWindow = getStorybookWindow(canvasElement);

	return storybookWindow.ng;
}

get-storybook-window.ts

import { ɵGlobalDevModeUtils } from '@angular/core';

export function getStorybookWindow(
	canvasElement: HTMLElement
): Window & typeof globalThis & ɵGlobalDevModeUtils {
	const {
		ownerDocument: { defaultView: storybookWindow },
	} = canvasElement;

	if (storybookWindow === null) {
		throw new Error('Could not resolve Storybook Window object');
	}

	return storybookWindow as Window & typeof globalThis & ɵGlobalDevModeUtils;
}