4

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

Vicens Fayos
  • 740
  • 1
  • 5
  • 18

1 Answers1

4

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.

michael
  • 16,221
  • 7
  • 55
  • 60
  • Ok!, it works like a charm. Now I understand some unexpected behaviour I had when applying MDL markup to submodules as well. Thanks a lot!! you are doing a great work with angular-mdl! ... and just for understand it: who should restructure the 'wrong' mdl html you meant?, you or the mdl team? – Vicens Fayos Sep 19 '16 at 13:29
  • no, no. the restructering is done by angular2-mdl :) I need to document this a little bit more... – michael Sep 19 '16 at 13:32
  • @michael - I have mdl-layout-drawer and mdl-layout-header in the same component as they have common functionality. As you're saying in this answer that mdl-layout-drawer and mdl-layout-header must be direct children of mdl-layout, does that mean that it is not possible to put them in the same component? Is there a workaround or would I need to go back to regular mdl if I want to structure my code like this? – Diskdrive Apr 25 '17 at 05:10
  • Hi, i have a question regarding this. Like @michael said "mdl-layout-header, mdl-layout-drawer and mdl-layout-content are used as ContentChild in mdl-layout". How should i pass the Events using EventEmitter from child to as in this case will behave like grand child. I'm trying to send event from drawer to the component holding mdl-layout but its not working. – Dinkar Thakur Jun 27 '17 at 05:54