Material Design Lite Tips Not Working With Angular 2

Question

I play with both Angular 2 and Material Design Lite. However, many components of Material Design Lite seem to break when placed inside an Angular 2 template.

for example

app.component.ts

@Component({
 selector: 'this-app',
 templateUrl: 'app/app.component.html'
})
export class AppComponent {
  public message : string = "This is my Application" ;
  public menuItems : string[] = ["Personnel", "Contacts", "Accounting"];
  public appTitle : string = "Gravity HR";
  public messages : string[] = ["message 1", "Message 2", "Message 3 ", "Message 4"];
}  

app.component.html

<main class="mdl-layout__content">
  <div class="page-content">
    <h1>{{message}}</h1>
    <div id="inbox1" class="fa fa-inbox fa-2x fa-fw  mdl-badge mdl-badge--overlap" data-badge="4"></div>
    <div for="inbox1" class="mdl-tooltip">You have {{messages.length}} messages</div>
  </div>
</main>

Tooltips are not displayed in this code. However, if I copy the code outside the Angular 2 component, a tooltip will appear. See Plunker Example

In addition, another thing I would like to do is associate with the data-badge property of the div type as follows:

<div id="inbox1" class=... data-badge={{messages.length}}>

This does not work - I assume, because the data icon is not a true property of the div tag?

Thank you for your help.

Answer 1

encapsulation None . Angular Emulated CSS , MDL .

, . , index.html, Angular, .

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
 selector: 'this-app',
 templateUrl: 'app/app.component.html',
 encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  ngAfterViewInit() {
    componentHandler.upgradeDom();
  }
}

DOM componentHandler.upgradeDom() .

.
- / MDL Google, ?