Angular Elements: dependency on Material

Asked 4/7, 2018 at 0:17 Answered 29/3, 2019 at 8:12

angular angular-material angular-elements

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.

Insatiable answered 4/7, 2018 at 0:17 Comment(4)

Have you found a way to package Angular Material with an Angular Element? – Kato 4/9, 2018 at 19:0

I haven't. I'm still requiring users to include a material theme themselves. – Insatiable 9/9, 2018 at 4: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. – Kyrstin 11/3, 2020 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. – Dives 2/10, 2022 at 21:0

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

Hertha answered 8/9, 2018 at 22:30 Comment(3)

That might work, but what if they already have a Material theme for their app? – Insatiable 9/9, 2018 at 4: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. – Hertha 9/9, 2018 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 – Nowise 13/2, 2019 at 17:9

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

Stephanstephana answered 29/3, 2019 at 8:12 Comment(0)

Recommended topics

Hot tags