Material Design Lite tool tip issue in Angular 2

Question

I've researched and read everything I can find on the issue I'm having, but I can't seem to get any of the proposed solutions to work. I'm building an application using Angular 2 and MDL that takes customer orders and displays them on MDL cards. Sometimes orders have errors, which I want to display on hover utilizing the MDL tooltip, but it won't work for me. The application is set up to make an API call to fetch incoming orders and then display them using the MDL card template using *ngFor. All that works great.

Here's the portion of my template that contains the MDL tooltip:

    <div id="id{{order.order_id}}" class="error-icon-div">
      <div class="icon material-icons error-icon" *ngIf="order.error">
        error
      </div>
    </div>
    <div class="mdl-tooltip mdl-tooltip--large" attr.data-mdl-   
    for="id{{order.order_id}}">
       {{order.error}}
    </div>

Since you can't use the same ID more than once, I'm generating a unique ID for each card/order by taking the string 'id' and adding the order ID. I know this works because I can see it when I inspect the elements in the browser's dev tools.

I read that I should set each component's encapsulation to none like this:

    encapsulation: ViewEncapsulation.none

I've done that. I also read that I should use the componentHandler to upgrade the DOM, which I've tried two different ways.

First I tried it like this:

    ngAfterViewInit() {
       componentHandler.upgradeDom();
    };

I also tried it like this:

    ngAfterViewInit() {
      componentHandler.upgradeAllRegistered();
    };

None of this has worked.

I discovered that if I simply set the id equal to a string instead of doing it dynamically with Angular that it works, but then I encounter the issue of how to generate a unique ID for every order/card.

I'm wondering if this is some sort of timing issue, and that even though when inspecting the element in dev tools I see the id rendered the way I expect it to be, MDL doesn't see it that way. I tried using setTimeout to delay ngAfterViewInit() from being called a second or two, but to no avail.

Any help would be greatly appreciated.

Answer 1

I've gotten MDL to work with Angular2. I had to set it in the ngAfterViewChecked event.

In App.Component.ts:

import $ from 'jquery';
import { Component, AfterViewChecked, ViewEncapsulation, Inject } from '@angular/core';
import { AccountService } from '../services/account.service';
import { User } from '../models/user.model';
import 'material';

@Component({
    selector: 'my-app',
    templateUrl: 'app/components/app.component.html',
    styleUrls: ['...', 'dist/vendors.min.css'],
    encapsulation: ViewEncapsulation.None //for ui framework to work normally
})
export class AppComponent implements AfterViewChecked {

    constructor(
        private accountService: AccountService,
        @Inject('User') public user : User ) {
    }

    ngAfterViewChecked() { //need to start ui frameworks quite late.
       componentHandler.upgradeAllRegistered();
    }

}