Mdl tabs "is-active" class is not applied by [ngClass]. about angular-material-design-lite

[jadjoubran]

Hi @abhibly
I opened the console and I saw an error with the syntax

You need to wrap your is-active with quotes 'is-active' for it work:

Here's the updated line:

<a href="#starks-panel" id="first" class="mdl-tabs__tab" [ngClass]="{ 'is-active': isOn}">Starks</a>

Let me know if this fixes your issue

[abhibly]

@jadjoubran thanks... i updated the code which you gave and it is working...Yesterday i came across with another problem i.e i am trying to implement tab in a tab...Earlier i used to load the tab using jquery which used to work properly but in angular 2 i just placed a tab inside a tab but it is not working as expected...I have created a plunker demo for it and here it is->http://plnkr.co/edit/b0ZAI78iEETkGyNIlzSO?p=preview I am familiar using Mdl with jquery but using Mdl with Angular2 i am experiencing new problems and learning new things.How can it be rectified brother...Please help

[jadjoubran]

Hi @abhibly
You need to manually upgrade the component (second tab) when you want to show it
Check mdl's official docs on upgrading components

Feel free to reply back if it worked or if you're still having issues