Change body styles from component via angular animation

Question

I have component modal-window and i want to make it full screen with angular animation. Now it is implemented as document.querySelector('body').classList.toggle('modal-fullscreen');. Also in css i have transition 0.3s for this animation. Now i need to remake it in angular animation. How i can change styles for body directly from modal-window component animation?

Answer 1

You could achieve this by using ElementRef like this -

constructor(private elRef: ElementRef) {
    console.log(elRef.nativeElement.ownerDocument.body);
  }

OR

You can simply use

document.body

But using document is not recommended in case of server-side rendering.

Working Example