how can i disable a body style for only one component

Can you try to put

.visibleClass{overflow-y: visible ;}

to style.css under body css attribute

in appcomponent.html add activate event to router-outlet

<router-outlet (activate)="showHideNav($event)"></router-outlet>

then in component.ts

 showHideNav(event){
    event instanceof YourComponent ? document.body.classList.add("visibleClass") :
                                     document.body.classList.remove("visibleClass")
  } 

It doesn't work because this div is inside of an invisible body and there's no way to tell body to display it without being displayed itself.

In you case without changing the architecture it's impossible.

You need to do something like the code below.

<body>
  <div class="new-body-root"> <!-- move all body styles here -->
    ... all the code
  </div>
  <div class="div1"> <!-- now it's always visible, hide it when you don't need it -->
    ...
  </div>
</body>