Angular: Toggle Sidenav with Icons across 3 components

Question

I am trying to develop a homepage which toggles a sidenav which I have done successfully however, if the sidenav is closed I still want to show the icons on the lefthand side rather than icons and text (when opened). I have three components: app, header and side-nav.

The toggler is in the header component and I have created an event binder so that the Text in the sideNav disappears when toggled. This issue is that the page does not adjust as a consquence and the sidenav is still the same size but with less text. Please see code below (i've only taken snippet of code that i think are relevent to this problem).

Not sure if this is an typescript issue or something css?

header.html

  <button mat-icon-button (click)="toggleSideNav()"><mat-icon>menu</mat-icon></button>

header.ts

 @Output() onToggleSideNav: EventEmitter<any> = new EventEmitter();

toggleSideNav() {
    this.onToggleSideNav.emit();
  }

app.html

<mat-drawer-container>
    <mat-drawer mode="side" [opened]=true>
        <app-side-nav [isExpanded]='sideNavOpen'></app-side-nav>
    </mat-drawer>
    <mat-drawer-content>
        <app-header (onToggleSideNav)='sideNavToggler()'></app-header>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

app.ts

sideNavOpen: boolean = true;
  sideNavToggler() {
    this.sideNavOpen = !this.sideNavOpen
  }

sidenav.html

<mat-nav-list>
    <a mat-list-item routerLink="/home" routerLinkActive="list-item-active">
        <mat-icon>home</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Home</h4>
    </a>
</mat-nav-list>

sidenav.ts

 @Input() isExpanded: boolean = true;

Your question is pretty similar to https://stackoverflow.com/questions/46835554/angular-material-side-bar-with-half-side-mode — Braydon Harris, Dec 13 '21 at 20:05

PIoneer_2 · Answer 1 · 2021-12-18T13:03:44.303

As I got from your code...

The sidenav.ts file has hardcoded Input. So no matter what value it has it will be overwritten with the true value. Leave it unset to get its incoming dynamic value during initialization @Input() isExpanded: boolean;.If you need to handle an inputted value, then it could be done in ngOnChanges().
Original <mat-drawer> has no hardcoded width and can react to its inner content size change (https://material.angular.io/components/sidenav/overview#sidenav-autosize). Probably, your app-side-nav component's template has not changed width. Per your request, it should change according to the isExpanded's value. Please, check that isExpanded is used for it. For example,

<div id="app-side-nav" [ngClass]="{'expandedWidth': isExpanded, 
  'autoWidth': !isExpanded}">
...
</div>

Where CSS is following.

.expandedWidth {
  width: 200px;
}
.autoWidth{
  width: auto;
}

Also, there is a point to add some pleasant CSS things to make your app more smooth. Add transitions to the width change. Then your app will be smoother in changes. For example, add a transition for any change in 1 second with 'ease-out' timing function to the <app-side-nav>'s parent element: transition: all 1s ease-out;.

Hope, this will help.

Angular: Toggle Sidenav with Icons across 3 components

1 Answers1