Angular create component and add to app-root

modal.service.ts

import {ApplicationRef, createComponent, Injectable} from '@angular/core';
import {ModalComponent} from '../components/modal/modal.component';

@Injectable()
export class ModalService {
	constructor(private applicationRef: ApplicationRef) {}

	createModal() {
		// Get an `EnvironmentInjector` instance from the `ApplicationRef`.
		const environmentInjector = this.applicationRef.injector;

		// We can now create a `ComponentRef` instance.
		const componentRef = createComponent(ModalComponent, {
			environmentInjector,
		});

		// Last step is to register the newly created ref using the `ApplicationRef` instance
		// to include the component view into change detection cycles.
		this.applicationRef.attachView(componentRef.hostView);

		const root = document.getElementsByTagName('app-root')[0];
		root?.append(componentRef.location.nativeElement);

		return componentRef;
	}
}