Angular Elements: dependency on Material

13
votes

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.

2
angularangular-materialangular-elements
Have you found a way to package Angular Material with an Angular Element? - dev7
I haven't. I'm still requiring users to include a material theme themselves. - Alexander Taylor
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

2 Answers

2
votes

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
})
1
votes

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";