How to let my Angular libraries use the Angular Material Theme of the root app?

Question

I'm using Angular Material Components like inside my own Angular libraries. So far no problem. But is there a way so the libraries use the Angular Material Theming of the root app they are embedded in? The goal is to inherit the Theming of the root app for a consistent look & feel throughout the app.

One idea was to to add a reference to the theme stylesheet in my library component like this... @Component({selector: 'my-selector', templateUrl: 'path/to/my/template.html', styleUrls: '/path/to/the/theme/stylesheet', '...']}) ...or to import the theme stylesheet in the library component's stylesheet: @import 'path/to/the/theme/stylesheet.scss' The downside to this is that you you have to know the paths in root app. If the path changes over time, the reference is broken.

Answer 1

You can use APP_INITILIZER to set the path at application start-up and pass it as a provider.