Angular2 Router interacting with Material Design Lite

Question

I\'ve come across an interaction between the Angular2 router and the Material Design Lite (MDL) animations. If I create an element in a component

Answer 1

So after further digging, I thought I had found a solution. Playing with the plunkr I was able to show that the right manual call to componentHandler.<something> could address a similar issue I had managed to contrive in that plunkr.

However, the approach there (of creating a custom directive that triggered those calls on lifecycle events that the directive was attached to) didn't solve my issue. The "dynamic" nature of the router-outlet was still interfering. As far as I can tell, the calls to componentHandler were still premature and being done before the DOM had truly been updated by the router-outlet.

What I eventually had to do was to add some code to the activate method of RouterOutlet. I was already creating a custom RouterOutlet class, so it was simple enough to stick the code in the activate method.

However, I found that is is essential that you wait until the Promise associated with the activate method is resolved. So I did something like this:

declare var componentHandler: any;

...
export class MyRouterOutlet extends RouterOutlet {
  ...
  activate(instruction: ComponentInstruction) {
    // My custom activate stuff (i.e., check that user is
    // authorized to view this content)

    // Important part, call base class...
    return super.activate(instruction)
       .then((x) => {
          componentHandler.upgradeDom();
          return x;
       });
  }
}

Update:

I have not confirmed it, but I suspect that the reason the other solutions I alluded to did not work was because of another issue I ran across. My suspicion is that addressing that issue properly would have allowed the other solutions I referenced here to work.