I have a simple angular page with right side nav of angular material.
when I write all the code on app-component everything works as expected, the navbar opens aside from the toolbar and the main page as expected.  

see [Demo As Expected](https://stackblitz.com/edit/angular-b4gmby-m7okqq)  

But when I tried to split the app-root into component the side nav float on the toolbar, not as mode="side" of navbar should do.  

see [Demo Not As Expected](https://stackblitz.com/edit/angular-b4gmby-dzdxny?file=app%2Fmain-menu%2Fmain-menu.component.html)

I tried to play with CSS / add fxFlex but the behavior still the same 

What am I missing here?