Я играю с Angular 2 и Material Design Lite. Однако многие компоненты Material Design Lite, по-видимому, ломаются при размещении внутри шаблона компонента Angular 2.

Например

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>

Подсказки в этом коде не будут отображаться. Однако если я скопирую код за пределы углового компонента 2, появится подсказка.Смотрите пример Plunker

Кроме того, еще одна вещь, которую я хотел бы сделать - это привязка к свойству data-badge типа div вроде этого:

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

Кажется, это не сработает - я полагаю, что значок данных не является истинным свойством тега div?

Спасибо за вашу помощь.