angular2-mdl: Break layout in components does not work

Question

For a given layout from the demo-app http://mseemann.io/angular2-mdl/layout

<div class="demo-container" mdl-shadow="2">
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
  <mdl-layout-header>
     <mdl-layout-header-row>
        <mdl-layout-title>Title</mdl-layout-title>
        <mdl-layout-spacer></mdl-layout-spacer>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
           <a class="mdl-navigation__link" href>Link</a>
           <a class="mdl-navigation__link" href>Link</a>
           <a class="mdl-navigation__link" href>Link</a>
        </nav>
     </mdl-layout-header-row>
  </mdl-layout-header>
  <mdl-layout-drawer>
     <mdl-layout-title>Title</mdl-layout-title>
     <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href>Link</a>
        <a class="mdl-navigation__link" href>Link</a>
        <a class="mdl-navigation__link" href>Link</a>
     </nav>
  </mdl-layout-drawer>
  <mdl-layout-content>
     <router-outlet ></router-outlet>
  </mdl-layout-content>

it works if I copy paste directly in app.html but if I break it up in reusable components. Let's say:

<div class="demo-container" mdl-shadow="2">
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
  <header-comp></header-comp>
  <drawer-comp></drawer-comp>
<mdl-layout-content>
     <router-outlet ></router-outlet>
</mdl-layout-content>

Where <header-comp></header-comp> and <drawer-comp></drawer-comp> encapsulate part of the layout markup (<mdl-layout-header>...</mdl-layout-header> and <mdl-layout-drawer>...</mdl-layout-drawer> respectively)

Both components does not render anything in place

I am running Angular2 "2.0.0" (the brand new official final release) and angular-mdl "1.7.1" with Webpack as module bundler. It is good to say that all angular2-mdl directives rendered inside router-outlet are rendered properly. This leads to think that angular2-mdl is properly imported and installed.

More specifically, in app.module.ts:

@NgModule({
    imports: [  
        CommonModule,
        FormsModule,
        homeRouting,
        MdlModule
    ],

and both in header.tsand drawer.ts:

    providers: [
        MdlLayoutComponent
    ]

By last if I move one of my reusable component (let's say: <header-comp></header-comp>) out of the mark up (see below). The template content is rendered properly although the layout looks broken (as expected)

<header-comp></header-comp>    
<div class="demo-container" mdl-shadow="2">
     <mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
     <drawer-comp></drawer-comp>
     <mdl-layout-content>
         <router-outlet ></router-outlet>
</mdl-layout-content>

I can workaround it using plain mdl or duplicating code but... what is happening?

Cheers

Answer 1

The components mdl-layout-header, mdl-layout-drawer and mdl-layout-content are used as @ContentChild in mdl-layout. If they are not direct childs of mdl-layout angular will not find them. In fact they are undefined and you'll see nothing. (the reason is that the mdl html structure is different and they needs to be restructured).

If I understand right what you are trying to do: please remove the mdl-layout-header component from your header-comp and keep the mdl-layout-header component as a direct child of mdl-layout - in this way:

<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
   <mdl-layout-header>
      <header-comp></header-comp>
   </mdl-layout-header
   <mdl-layout-content>
     <router-outlet ></router-outlet>
   </mdl-layout-content>
</mdl-layout>

For the mdl-layout-drawer and mdl-layout-content you need to do the same.