CODEWITHSUNDEEP
angular
tylkonachwile
tylkonachwile

Reputation: 2267

Is it possible to change styles of 3rd party module?

I am quite new in Angular and I have a headache with a datepicker. In my Angular5 application I used a datepicker placed here:

https://github.com/kekeh/mydatepicker

To use this datepicker, I added:

<my-date-picker name="mydate" [options]="myDatePickerOptions"
                    [(ngModel)]="model" required></my-date-picker>

and works perfectly.

However I need to change some css styles of this element. This is simply input. Is there any chance to add some extra styles when view is fully loaded? Like in jQuery via document ready()?

Upvotes: 3

Views: 347

Answers (2)

David
David

Reputation: 34445

You can either add styles to your global style sheet, or in the CSS for the component which includes that datepicker. If in the component's CSS file, you'll probably have to use ::ng-deep combinator if using the default encapsulated emulation

::ng-deep my-date-picker input
{
    margin: 10px;
}

In either case, you still have to make sure that your CSS rulkes have precedence over the default ones

Upvotes: 1

Vega
Vega

Reputation: 28738

Combing info on https://github.com/kekeh/mydatepicker#change-styles-of-the-component and ::ng-deep:

::ng-deep my-date-picker .weekdaytitle{
  color: red !important;
  width:100px;
}

DEMO

Upvotes: 3

Related Questions