CODEWITHSUNDEEP
angularcssbootstrap-4angular-ui-bootstrapangular5
Vinod
Vinod

Reputation: 1290

Overwrite css class property for library component in Angular-5

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

Upvotes: 3

Views: 10410

Answers (3)

Vinod
Vinod

Reputation: 1290

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;
}

Upvotes: 8

user4676340
user4676340

Reputation:

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 :

  1. Use the ID given to your dropdown in your component's CSS file
  2. Inspect your component in the browser, and use selectors to target it in your global CSS file
  3. 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 {}

Upvotes: 3

Joni Dee
Joni Dee

Reputation: 21

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.

Upvotes: 0

Related Questions