Material Design Lite tooltips not working with Angular 2

I'm playing around with both Angular 2 and Material Design Lite. However, many of the Material Design Lite components seem to break when placed inside an Angular 2 component template.

For instance

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>

The tooltips in this code will not display. However if I copy the code outside of the angular 2 component, the tool tip displays. See Plunker example

Also, the other thing I would like to be able to do is bind to the data-badge property of the div kind of like this:

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

That doesn't seem to work -- I'm guessing because data-badge isn't a true property of the div tag?

Thanks for your help.