CODEWITHSUNDEEP
angular
Rohit
Rohit

Reputation: 3136

Passing styles to components

I'm working on a "pretty select" component, and I figure once I have it working well, I'll put it up for people to review/use (which is a different thing I have to figure out). One thing I'm trying to figure out is if someone want to use my component and I want to allow them to style it, how could I do that?

I know I can make the classes/structure public and then allow users to use /deep/ to pass in styles, but I'm noticing some priority issues there, though this seems like a more ideal method. I also know I could create an input on the component to pass in a object of styles and use use the [ngStyle] directive, but that could get complex, specially if the user wanted to pass the same style to multiple parts of the component.

The structure of the component is:

<div class="wrapper" [class.open]="showOptions">
    <ul class="options">
        <li *ngFor="let option of options" (click)="selectOption(option)">{{option.label}}</li>
    </ul>
    <div class="current" (click)="toggleOptions()">{{value.label}}</div>
    <div class="dropdown" (click)="toggleOptions()"></div>
</div>

I could attach a [ngStyle] to each, but that seems cumbersome. Is there a better way, or is that the best I have?

Upvotes: 1

Views: 252

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

You can use ngStyle as you mentioned or style them from the outside using ::ng-deep

* ::ng-deep child-comp dive.wrapper {
  border: solid 3px red;
}

You can also use SASS and path variables to allow a user to configure SASS imports using environment variables.

Upvotes: 2

Related Questions