How to adjust width of components in Angular while using Animations?

Question

I am trying to use Angular Animations to slide my navbar and it's working perfectly but I need to adjust the width of my other components automatically when the navbar is hidden. Like I want my other components to take the width of whole page when the navbar is hidden but some reason the width of my other components only gets adjusted after I click on any component. Can anyone please help me out and guide me how to adjust the width?

I am using ngIf to display and hide the navbar component. When I display and hide the navbar without animations, the width gets adjusted automatically. Any leads would be helpful. Thanks!

navmenu.component.ts

@Component({
  selector: 'nav-menu',
  templateUrl: './navmenu.component.html',
  styleUrls: ['./navmenu.component.css'],

  animations: [
    trigger(
         'inOutAnimation',
         [
           transition(
             ':enter',
             [
               animate('1s ease-out',
                       style({ width: 300, opacity: 1 }))
             ]
           ),
           transition(
             ':leave',
             [
               animate('1s ease-in',
                       style({ width: 0, opacity: 0 }))
             ]
           )
         ]
       )
]

Answer 1

Made a rough mock on stackblitz: https://stackblitz.com/edit/angular-nn2yzn

Element containing nav and other elements needs to be display: flex , if the other element has flex: 1 it will take up any space thats available to it. So if the width of the nav shrinks, the other element will grow