Conditional Layout [ngStyle] and subscription-triggered menu close.

Wed Jul 27 2022 20:22:54 GMT+0000 (Coordinated Universal Time)

Saved by @riapacheco

<!-- IN APP ROOT -->
<div class="scroll-window">
    <div [ngStyle]="(layout.isMobile$ | async) ? 
      {
        'width':'calc(80%)',
          'margin': 'auto'
      } : 
      {
        'width': 'calc(90%)',
          'margin' : 'auto'
      }">
  	<router-outlet></router-outlet>
  </div>
</div>
 
 
 
 
// in Sidebar Component
ngOnInit() {
  this.layout.layoutState$.subscribe((res: string) => {
    if (res == 'isTablet') { this.toggleMenuTo('closed'); }
  })
}

App root has ternary operator: IF the `layout-state` service shows the `isMobile$` observable is set to `true`, THEN assign this div a width of 80% and margin of `auto` to center the content. ELSE assign this div a width of 90% and margin of `auto` to center the content. In the SidebarComponent: IF the `layout-state` service shows `isTablet$` observable is set to `true` THEN toggle this menu closed