15

I'm creating an Angular Element to be used in other projects. The element is a component containing Angular Material components in its template, so ultimately my element requires that the page to <link> a Material theme CSS file (and material icons and material fonts files, and the link tag can only appear in the document's <head>).

It would be great to say all that's needed is call platformBrowser().bootstrapModuleFactory(...) and write <some-custom-element> on the page with no further instruction. Is that possible?

Is it acceptable to require users of my custom element to link in all these CSS files in the <head> of their page? I suppose with this pattern, adding new dependencies later wouldn't be a backwards compatible change, and I'd have to tell everyone to add the new CSS files or make a new Custom Element.

Alexander Taylor
  • 16,574
  • 14
  • 62
  • 83
  • 4
    Have you found a way to package Angular Material with an Angular Element? – dev7 Sep 04 '18 at 19:00
  • I haven't. I'm still requiring users to include a material theme themselves. – Alexander Taylor Sep 09 '18 at 04:27
  • I don't know if you have run into issue with angular component when you use your web component in other project. I have ran into alot issue like I have to call ChangeDetection to make the component to listening to the change or style problem with mat-select and mat-table. so much troubles. Not sure if you have conquar them. – Johnathan Li Mar 11 '20 at 12:51
  • Can you post your work around? I am trying to figure out what links to include in the html. But had no luck. – Dinesh Oct 02 '22 at 21:00

2 Answers2

2

You may need to set the encapsulation of the component to ViewEncapsulation.None.

@Component({
    selector: 'pay-button',
    templateUrl: './pay-button.component.html',
    styleUrls: ['./pay-button.component.scss'], //include material related css here
    encapsulation: ViewEncapsulation.Native
})
Kyle Snell
  • 81
  • 1
  • 1
  • 11
  • That might work, but what if they already have a Material theme for their app? – Alexander Taylor Sep 09 '18 at 04:29
  • Good point @AlexanderTaylor. I was able to get all the material styles applied (snackbar, buttons, form elements, etc.) with native view encapsulation by including all the related styles directly in the component specific scss file. Updated my answer. – Kyle Snell Sep 09 '18 at 22:56
  • Do you have an example? For me it is a little bit challenging to get a theming with angular and angular material version 7.x working. Components like a datepicker aren't styled at all. Thank you in advance – Thomas Zoé Feb 13 '19 at 17:09
1

I was able to use Mat Icons by simply importing the font-family into the src/styles.scss.

@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

Simon Hansen
  • 622
  • 8
  • 15