Angular2 + Material Design Layout issues

[Kyle Thomas]

When I start separating my layout components (header, banner, sidnav, etc) angular 2 wraps them in a new div

Doesn't work:

SidenavComponent => selector: 'app-sidenav'

displays in the browser as: 

<app-sidenav _ngcontent-yai-42="" _nghost-yai-45="">
  ...
</app-sidenav>

Works:

Take the code out of the component template and just put it within the DIV of the parent component.
This removes the <app-sidenav> outter tags.


This causes the layout to be hidden and not displayed in the browser.

Any suggestions?

[Michael Prentice]

Which Material Design Layouts are you referring to? Are you building your Material behaviors and styles yourself or using an existing library?

How are you defining your styles? You may want to look at the Guide on ViewEncapsulation.

Michael Prentice

DevIntent

GDG Space Coast