Add component to html body

Question

I have an Angular 13 (vanilla) app, and I need to print a part of the app. I use the @media print for that an it work (in the angular app alone) But my angular app is build a js file and use by other C# who create web app. Obviously the C# app load my angular app as a component in a container whitch set the size of the angular app (width, height, overflow, position, ...). When i try to print my content in the C# I only see a part of what I want to print, because the content of the angular app is limited by the C# container. I cannot change the C# DOM or css.

The ideal whould be to add my angular component who has the printable content in the html body, to be free from other style.

But dont real find good way to do it (most use ComponentFactoryResolver whitch is deprecated). I think I need to use ViewContainerRef but I don't know how to target the body.

I am in a professional environment so I cannot add libs, module, ... easily (need 6 month to validate something). When I build the angular to JS I dont take the style.scss nor the index.html.

I hope someone could help me.

I tried using ComponentFactoryResolver but it is deprecated and I don't have the right to use it.

I don't know how to use ViewContainerRef to target the html body.

Answer 1

I found what I was looking for, in the component you want to move to the html body :

  constructor(
    private readonly el: ElementRef<HTMLElement>,
  ) {
  }

  public ngAfterViewInit(): void {
    document.body.insertAdjacentElement("afterbegin", this.el.nativeElement);
  }