angular-material auto toggle sidenav with @ngrx/store example
With sidenav module of angular-material, it is the sample which changes the mode of the sidenavi from ‘side’ to ‘over’ automatically when screen size is changed.
I manage the opening and shutting status of the sidenavi in store using @ngrx/store. Similarly, I manage the title on appbar in store. I can confirm the state of the store by Redux DevTools addon of Google Chrome.
angular-materialのappbarとsidenavモジュールを使い、スクリーンサイズが変更されると自動的にサイドナビのモードをoverに変更するサンプルです。
サイドナビの開閉ステータスは@ngrx/storeを使い、storeで管理しています。同様にappbar上のタイトルもstoreで管理しています。ストアの状態はGoogle ChromeのRedux DevToolsアドオンで確認する事ができます。
# browse and install Google chrome addonhttps://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja# git clonegit clone https://github.com/treetips/angular-material-appbar-sidenav-ngrx-example.gitcd angular-material-appbar-sidenav-ngrx-example# install node_modulesyarn install# startyarn start# open dev tools and select redux tab# browsehttp://localhost:4200/