https://github.com/andrewalderson/angular-material-sidenav-resize
A sample of how to make the Angular Material Sidenav resizable with animations
https://github.com/andrewalderson/angular-material-sidenav-resize
angular animation material
Last synced: 2 months ago
JSON representation
A sample of how to make the Angular Material Sidenav resizable with animations
- Host: GitHub
- URL: https://github.com/andrewalderson/angular-material-sidenav-resize
- Owner: andrewalderson
- License: mit
- Created: 2021-12-21T20:09:48.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-27T21:16:22.000Z (over 2 years ago)
- Last Synced: 2025-06-01T10:02:00.957Z (about 1 year ago)
- Topics: angular, animation, material
- Language: TypeScript
- Homepage: https://andrewalderson.github.io/angular-material-sidenav-resize
- Size: 549 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Material Sidenav Resize
[Demo](https://andrewalderson.github.io/angular-material-sidenav-resize)
This is a sample of how to add an animation when changing the width of the Material Sidenav or Drawer components.
Currently this functionality is not supported. The 'autosize' functionality of the container component only
supports resizing without an animation. The problem with the current implementation
is that class added to the container ('mat-drawer-transition') to handle the animations interferes with proper
adjustment of the container margins and causes the updating of the margins to lag behind the updating of the
with of the drawer.
This sample uses a directive that handles removing the 'mat-drawer-transition' class
after the animations are completed. It also adds a directive that encapsulates
observing the resize of the drawer and updating the containers content margins.
It also uses an internal 'viewport' component that encapsulates the animations
for resizing the width of the drawer. We are not actually resizing the drawer but this internal component.
The drawer is set to be the width of this internal 'viewport'.