Search code examples
cssangulartypescriptangular-cdk

Pass CSS class to Angular Library

I am creating a library using angular CDK for custom modal. I want the application which would use the library to pass the CSS class name with other configuration for the modal window. So that I can apply the class like this in the library.

  this.overlayContainer.getContainerElement().classList.add(modalConfig.overlayContainerClass);

I can see the class is applied to the element but no class present.

<div class="cdk-overlay-container overlay-material-design-theme mat-typography custom">

I have defined this in the application component CSS file.

.custom{
  width: 100%;
}

The question is how the CSS which is present in the application component would be accessible to library component?

Solution

  • For css classes to work that way you have to put them in a place where view encapsulation is not present.

    The place for that is usually in the src/styles.scss.

    If you want more structure you can have them in another scss file that src/styles.scss imports.