Overwrite css class property for library component in Angular-5

Question

I have a angular-5 dropdown component from third party library in my code, this component has its own CSS, and due to its default behavior i am unable to change its CSS(here i am trying to reduce width of dropdown), i tried using writing another css class and inline style also but it does not change the width.

HTML code, where i have controlled on my code:(3rd party dropdown component)

    <test-dropdown id="dropdown" label="Options Array"
              [selectedOption]="dropdownOptions[0]">
           <test-option *ngFor="let option of dropdownOptions"
              [option]="option" [disabled]="option.disabled">{{option.label}}  
           </test-option>
    </test-dropdown>

Above dropdown component, after running an application in browser looks like,

    <test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
  <div class="test-dropdown" ng-reflect-ng-class="[object Object]">
    <label>DropDown</label>
    <div>
      <button class="select">Select...</button>
      <div class="dropdown">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option One
          </button>
        </test-option>
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option Two
          </button>
        </test-option>
        <!--bindings={}-->
      </div>
    </div>
  </div>
</test-dropdown>

In short i want to apply css style on classes, test-dropdown->button.select and test-dropdown->div.dropdown

Vinod · Accepted Answer · 2018-05-23T06:11:12.253

I used ::ng-deep pseudo-class selector, refereed this Docs https://blog.angular-university.io/angular-host-context for angular view encapsulation.

Below code snippet works for me to overwrite the css property using ng-deep. e.g in my case <test-dropdown> is a angular component which takes default css class .dropdown of it, now i want to modify min-width property so i did it using ng-deep pseudo-class selector, same for other angular component also.

test-dropdown::ng-deep .dropdown {
  min-width: 20%;
}

test-button::ng-deep .test-button {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
  cursor: pointer;
  min-width: 20%;
}

test-date-picker::ng-deep .date {
  min-width: 100%;
  line-height: 1.42857143;
}

test-date-picker::ng-deep .date-picker {
  min-width: 100%;
  line-height: 1.42857143;
}

**[Another question on SOF](https://stackoverflow.com/questions/49859784/ng-deep-going-to-be-deprecated-any-alternatives)** explains how `ng-deep` will be deprectaed. So even though this solution works, I recommend not using it. — , May 23 '18 at 11:05

score 3 · Answer 2 · 2018-05-18T07:27:51.940

This question relies on CSS specificity : the CSS rules have an order, and if you want your style to be applied, then you should use the correct CSS rules.

You also have to combine this with Angular's view encapsulation to be sure that your style is indeed applied.

For that, several solutions :

Use the ID given to your dropdown in your component's CSS file
Inspect your component in the browser, and use selectors to target it in your global CSS file
Use the ngStyle directive, or for only one property, [style.property]="'value'"

EDIT

In your case, you should add your style to your global CSS file, style.css (or whatever extension it has). Your selector will be :

test-dropdown#dropdown div.test-dropdown div button.select {}

thanks for help, i used `::ng-deep pseudo-class selector` from Angular view encapsulation. — Vinod, May 21 '18 at 05:34
As a side note, ng-deep is getting deprecated, you should avoid using that — , May 21 '18 at 06:59

score 0 · Answer 3 · answered May 18 '18 at 06:48

0

The default form values are most likely being taken from your website's CSS, and unlikely to be taking the style from the 3rd party library).

Can you show the website and your CSS class code? it will be easier to track the issue in Chrome's developer mode and see where is it getting the style from.

answered May 18 '18 at 06:48

Joni Dee

21
2

cant share the website due to permissions, and css class code is compiled and minified and angular component resides in node_modules folder. The only control i have here is, first code snippet mentioned in question and custom css class file. All this came in picture once i installed npm package for this library. – Vinod May 18 '18 at 06:56
Without seeing the code all I can suggest is that you define the CSS style properly using these tags: #option and #dropdown. However, I suspect your style is overruled by your theme. Check the page with Chrome's developer mode [F12] and try to see which style is being applied to the buttons and dropdown. then chase where in the theme this style is, and either change it or overrule it (using the CSS rules mentioned in the answer above). Good luck. – Joni Dee May 18 '18 at 07:22

Overwrite css class property for library component in Angular-5

3 Answers3

EDIT