Pass CSS class to Angular Library

Question

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?

the custom class should be defined in a file that's not subject to the encapsulation rules. Usually that's the global styles.scss file in the root folder. Or in a file that is imported in there if you want more structure. — toskv
– toskv, Commented Mar 27, 2020 at 12:37
please also mark the actual answer as the correct one so other people will know what the solution was easily. — toskv
– toskv, Commented Mar 30, 2020 at 8:55

toskv · Accepted Answer · 2020-03-27 14:34:40Z

1

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.

answered Mar 27, 2020 at 14:34

toskv

31.8k7 gold badges77 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass CSS class to Angular Library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related