Angular2 -mdl: Layout break in components not working

Question

For this layout from the demo application 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 into app.html, but if I break it in reusable components. Let them talk:

<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 layout ( <mdl-layout-header>...</mdl-layout-header>and <mdl-layout-drawer>...</mdl-layout-drawer>accordingly)

Both components do nothing in place

I am running Angular2 "2.0.0" (new official release) and angular -mdl "1.7.1" using Webpack as a module. It’s good to say that all angular2 -mdl directives displayed inside the router are displayed correctly. This causes angular2 -mdl to import and install correctly.

, app.module.ts:

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

header.ts drawer.ts:

    providers: [
        MdlLayoutComponent
    ]

, (: <header-comp></header-comp>) (. ). , ( )

<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>

, mdl , ... ?

Answer 1

mdl-layout-header, mdl-layout-drawer mdl-layout-content @ContentChild mdl-layout. mdl-layout angular, . undefined, . ( , mdl html , ).

, : mdl-layout-header header-comp mdl-layout-header mdl-layout - :

<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>

mdl-layout-drawer mdl-layout-content .