Using Angular2 With Material Design Lite
<p>I am learning Angular2 but I have problem about using Angular2 with MDL.
Why MDL navigation bar is not working with Angular2? When I use Navigation bar with header and drawer, drawer is not working so I cannot click on it, I cannot see drawer's icon.
There is another problem: textfields also is not working correctly. I want to use mdl-textfield--expandable (Search) but when I click on this search field it is not expanding. However, without Angular2 it is working fine.</p>
<p><strong>UPDATE</strong></p>
<h3>it is my app.html file</h3>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;demo-layout-waterfall mdl-layout mdl-js-layout&quot;&gt;
    &lt;header class=&quot;mdl-layout__header mdl-layout__header--waterfall&quot;&gt;
        &lt;!-- Top row, always visible --&gt;
        &lt;div class=&quot;mdl-layout__header-row&quot;&gt;
            &lt;!-- Title --&gt;
            &lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
            &lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;



            &lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right&quot;&gt;
                &lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot; for=&quot;waterfall-exp&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
                &lt;/label&gt;
                &lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
                    &lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; name=&quot;sample&quot; id=&quot;waterfall-exp&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;


        &lt;/div&gt;
        &lt;!-- Bottom row, not visible on scroll --&gt;
        &lt;div class=&quot;mdl-layout__header-row&quot;&gt;
            &lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
            &lt;!-- Navigation --&gt;
            &lt;nav class=&quot;mdl-navigation&quot;&gt;
                &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
                &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
                &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
                &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;div class=&quot;mdl-layout__drawer&quot;&gt;
        &lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
        &lt;nav class=&quot;mdl-navigation&quot;&gt;
            &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
            &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
            &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
            &lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
        &lt;/nav&gt;
    &lt;/div&gt;

    &lt;main class=&quot;mdl-layout__content&quot;&gt;
        &lt;div class=&quot;page-content&quot;&gt;
            &lt;!-- Your content goes here --&gt;
            
           

        &lt;/div&gt;
    &lt;/main&gt;
&lt;/div&gt;
</code></pre>
<h3>app.ts</h3>
<pre><code>import { Component } from 'angular2/core';


@Component({
    selector: 'my-app',
    templateUrl: 'app/app.html',
    styleUrls: ['app/assets/css/material.min.css']

})
export class AppComponent { }
</code></pre>
<h3>main.ts</h3>
<pre><code>import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);
</code></pre>