5

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.

RHarris
  • 10,641
  • 13
  • 59
  • 103

1 Answers1

4

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?

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I tired adding those changes to the Plunk example and it did not seem to make a difference. Any thoughts? – RHarris Mar 09 '16 at 17:51
  • With my above change it works in Firefox but not in Chrome. Maybe related to Plunker but in general this should be the fix. – Günter Zöchbauer Mar 09 '16 at 18:41
  • BTW, any thought on how to bind to the data-badge property so I can dynamically update the badge value? – RHarris Mar 09 '16 at 20:39
  • Was weird because in the DOM (browser dev tools) the tooltip was visible and nothing indicates it to be hidden or otherwise not visible. Looks like a Chrome bug to me. – Günter Zöchbauer Mar 09 '16 at 20:40
  • Ah, didn't read as far. Probably one of this does what you want `attr.data-badge` or `[attr.data-badge]=` – Günter Zöchbauer Mar 09 '16 at 20:42
  • 1
    Perfect! Thanks so much! the [attr.data-badge] worked – RHarris Mar 09 '16 at 21:02
  • I found the Plunkr useful but found that it wasn't sufficient when dealing with components that are changed dynamically depending on the route in Angular2. So if anybody has issues specifically with components inside `router-outlet`, you might want to have a look at [this question](http://stackoverflow.com/a/36163652/105389) – Michael Tiller Mar 22 '16 at 19:55
  • All i needed was to add `ViewEncapsulation.None`. I don't understand why this fixed my issue though because i'm applying the css locally within the component itself. – Post Impatica May 13 '16 at 19:03
  • "because i'm applying the css locally within the component itself.". That's probably causing the issue. When you add it on the component, the CSS gets rewritten. When you add it on the `index.html` then it doesn't matter if you use `None` or `Native` (default). I'll update my answer. – Günter Zöchbauer May 13 '16 at 19:05
  • What is `componentHandler` and where does it come from? – Wouter Lievens Dec 06 '17 at 10:15
  • It's from MDL. https://stackoverflow.com/questions/41986734/angular2-angular-cli-and-material-design-lite-angular2-mdl might help – Günter Zöchbauer Dec 06 '17 at 10:18