My Angular application features a mat-sidenav that is organized like this:
<mat-sidenav-container>
<mat-sidenav [mode]="'side'">
<!-- Sidenav content -->
</mat-sidenav>
<mat-sidenav-content>
<!-- Main content -->
</mat-sidenav-content>
</mat-sidenav-container>
I am trying to disable the transition animation for the mat-sidenav while keeping the animations for the sidenav content intact (e.g. for a mat-vertical-stepper). However, I have not been successful in achieving this.
I came across this similar issue on GitHub, but the proposed solutions there seem to disable all animations, including those of the sidenav content. For example, I attempted the following:
<mat-sidenav-container [@.disabled]="true">
<mat-sidenav [mode]="'side'">
<!-- Sidenav content -->
</mat-sidenav>
<mat-sidenav-content>
<!-- Main content -->
</mat-sidenav-content>
</mat-sidenav-container>
which disables the transition animation for the sidenav, but also affects all other animations. Another attempt that did not work was:
<mat-sidenav-container [@.disabled]="true">
<mat-sidenav [mode]="'side'" [@.disabled]="false">
<!-- Sidenav content -->
</mat-sidenav>
<mat-sidenav-content [@.disabled]="false">
<!-- Main content -->
</mat-sidenav-content>
</mat-sidenav-container>
I also referred to this article in Angular's official documentation, but it seemed complex and I struggled to apply it to components without custom animations (like the mat-vertical-stepper).
Is there a simple method to disable the transition animation for a mat-sidenav while preserving the animations for its children?