Using the demo project of angular2-mdl as a guide I ported the tab component and tried to implement it as following:
import { Component } from '@angular/core';
@Component({
selector: 'my-dashboard',
templateUrl: './landing.my.html'
})
export class MyDashboard {
public activeIndex = 0;
public tabChanged({index}): void {
this.activeIndex = index;
}
}
and the template:
<mdl-tabs mdl-ripple mdl-tab-active-index="0" (mdl-tab-active-changed)="tabChanged($event)">
<mdl-tab-panel mdl-tab-panel-title="home">
<mdl-tab-panel-title>
<mdl-icon class="mdl-color-text--primary">home</mdl-icon><span>Home</span>
</mdl-tab-panel-title>
<mdl-tab-panel-content>
<ul>
<li>Stanis</li>
<li>Joffrey</li>
</ul>
</mdl-tab-panel-content>
</mdl-tab-panel>
<mdl-tab-panel mdl-tab-panel-title="something">
<mdl-tab-panel-title>
<mdl-icon class="mdl-color-text--primary">group_work</mdl-icon><span>Ontology</span>
</mdl-tab-panel-title>
<mdl-tab-panel-content>
<ul>
<li>Stanis</li>
<li>Joffrey</li>
</ul>
</mdl-tab-panel-content>
</mdl-tab-panel>
<mdl-tab-panel mdl-tab-panel-title="another">
<mdl-tab-panel-title>
<mdl-icon class="mdl-color-text--primary">list</mdl-icon><span>Cognitive</span>
</mdl-tab-panel-title>
<mdl-tab-panel-content>
<ul>
<li>Robert</li>
</ul>
</mdl-tab-panel-content>
</mdl-tab-panel>
<mdl-tab-panel mdl-tab-panel-title="else">
<mdl-tab-panel-title>
<mdl-icon class="mdl-color-text--primary">call_split</mdl-icon><span>Cognition</span>
</mdl-tab-panel-title>
<mdl-tab-panel-content>
<ul>
<li>Robert</li>
<li>Renly</li>
</ul>
</mdl-tab-panel-content>
</mdl-tab-panel>
<mdl-tab-panel mdl-tab-panel-title="last">
<mdl-tab-panel-title>
<mdl-icon class="mdl-color-text--primary">backup</mdl-icon><span>Streaming</span>
</mdl-tab-panel-title>
<mdl-tab-panel-content>
<ul>
<li>Joffrey</li>
<li>Myrcella</li>
<li>Tommen</li>
</ul>
</mdl-tab-panel-content>
</mdl-tab-panel>
</mdl-tabs>
I am using webpack and I get the following TypeScript error regarding implicit any types:
ERROR in [default] home/my-app-ui/src/app/landing.my.ts:10:23
Binding element 'index' implicitly has an 'any' type.
However the app displays the desired functionality, can someone explain how to fix this?
use any
or specific type of the variable like ( numbers,string,etc )
public tabChanged(index:any): void {
this.activeIndex = index;
}