Material Design Lite tooltips not working with Angular 2

Question

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.

Answer 1

Set encapsulation to None on all your components. Angular uses Emulated by default and tries hard to prevent CSS bleeding in and out of components but MDL needs to be able to apply styles across component boundaries.

The above only applies to styles added to components. Styles added to the index.html aren't rewritten by Angular and no style scoping is applied for these styles.

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

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

When the DOM is changed componentHandler.upgradeDom() needs to be called.

See also
- How can I update/refresh Google MDL elements that I add to my page dynamically?