Using the [demo project of angular2-mdl][1] as a guide I ported the tab component and tried to implement it as follow:

    import { Component } from &#39;@angular/core&#39;;
    
    @Component({
        selector: &#39;my-dashboard&#39;,
        templateUrl: &#39;./landing.my.html&#39;
    })
    export class MyDashboard {
        public activeIndex = 0;
    
        public tabChanged({index}): void {
            this.activeIndex = index;
        }
    
    }

and the template is:

    &lt;mdl-tabs mdl-ripple mdl-tab-active-index=&quot;0&quot; (mdl-tab-active-changed)=&quot;tabChanged($event)&quot;&gt;
        &lt;mdl-tab-panel mdl-tab-panel-title=&quot;home&quot;&gt;
            &lt;mdl-tab-panel-title&gt;
                &lt;mdl-icon class=&quot;mdl-color-text--primary&quot;&gt;home&lt;/mdl-icon&gt;&lt;span&gt;Home&lt;/span&gt;
            &lt;/mdl-tab-panel-title&gt;
            &lt;mdl-tab-panel-content&gt;
                &lt;ul&gt;
                    &lt;li&gt;Stanis&lt;/li&gt;
                    &lt;li&gt;Joffrey&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/mdl-tab-panel-content&gt;
        &lt;/mdl-tab-panel&gt;
        &lt;mdl-tab-panel mdl-tab-panel-title=&quot;something&quot;&gt;
            &lt;mdl-tab-panel-title&gt;
                &lt;mdl-icon class=&quot;mdl-color-text--primary&quot;&gt;group_work&lt;/mdl-icon&gt;&lt;span&gt;Ontology&lt;/span&gt;
            &lt;/mdl-tab-panel-title&gt;
            &lt;mdl-tab-panel-content&gt;
                &lt;ul&gt;
                    &lt;li&gt;Stanis&lt;/li&gt;
                    &lt;li&gt;Joffrey&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/mdl-tab-panel-content&gt;
        &lt;/mdl-tab-panel&gt;
        &lt;mdl-tab-panel mdl-tab-panel-title=&quot;another&quot;&gt;
            &lt;mdl-tab-panel-title&gt;
                &lt;mdl-icon class=&quot;mdl-color-text--primary&quot;&gt;list&lt;/mdl-icon&gt;&lt;span&gt;Cognitive&lt;/span&gt;
            &lt;/mdl-tab-panel-title&gt;
            &lt;mdl-tab-panel-content&gt;
                &lt;ul&gt;
                    &lt;li&gt;Robert&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/mdl-tab-panel-content&gt;
        &lt;/mdl-tab-panel&gt;
        &lt;mdl-tab-panel mdl-tab-panel-title=&quot;else&quot;&gt;
            &lt;mdl-tab-panel-title&gt;
                &lt;mdl-icon class=&quot;mdl-color-text--primary&quot;&gt;call_split&lt;/mdl-icon&gt;&lt;span&gt;Cognition&lt;/span&gt;
            &lt;/mdl-tab-panel-title&gt;
            &lt;mdl-tab-panel-content&gt;
                &lt;ul&gt;
                    &lt;li&gt;Robert&lt;/li&gt;
                    &lt;li&gt;Renly&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/mdl-tab-panel-content&gt;
        &lt;/mdl-tab-panel&gt;
        &lt;mdl-tab-panel mdl-tab-panel-title=&quot;last&quot;&gt;
            &lt;mdl-tab-panel-title&gt;
                &lt;mdl-icon class=&quot;mdl-color-text--primary&quot;&gt;backup&lt;/mdl-icon&gt;&lt;span&gt;Streaming&lt;/span&gt;
            &lt;/mdl-tab-panel-title&gt;
            &lt;mdl-tab-panel-content&gt;
                &lt;ul&gt;
                    &lt;li&gt;Joffrey&lt;/li&gt;
                    &lt;li&gt;Myrcella&lt;/li&gt;
                    &lt;li&gt;Tommen&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/mdl-tab-panel-content&gt;
        &lt;/mdl-tab-panel&gt;
    &lt;/mdl-tabs&gt;

I am using webpack, and i get the following error:

    ERROR in [default] home/my-app-ui/src/app/landing.my.ts:10:23 
    Binding element &#39;index&#39; implicitly has an &#39;any&#39; type.

however the app displays the desired functionality, can someone explain how to fix this ?

  [1]: https://github.com/mseemann/angular2-mdl/blob/master/src/demo-app/app/tabs/tabs.component.ts

All Angular2 Mdl Solutions on Gang of Coders

Total of 1 Angular2 Mdl Solutions

Binding element 'index' implicitly has an 'any' type