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 compone

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?