Apply css in component that uses js library

Question

in my application I'm using this library in order to let the user select a date.

I wrapped that bootstrap-widget in a Component like this:

@Component({
    selector: 'date-picker',
    template: '<input type="text" class="form-control" id="{{id}}" />',
    styles: [`
        .test {
            background-color: green;
        }
    `],
})
export class DatePickerComponent implements OnInit, OnChanges {
    public id: string;

    @Input() public date: Date;
    @Input() public disabled: boolean;

    public ngOnInit() {
        this.id = 'dp-' + new Date().getTime();
        window.setTimeout(() => this.initializeDatePicker());
    }

    public ngOnChanges(changes: any) {
        if (!this.pickerFunctions)
            return;

        var typedChanges = <DatePickerComponent>changes;
        if (typedChanges.disabled)
            this.setPickerDisabled(this.disabled);
        if (typedChanges.date)
            this.setPickerDate(this.date);
    }

    private initializeDatePicker() {
        var element = jQuery('#' + this.id);
        (<any>element).datetimepicker();
        element.on('dp.change', (e: any) => this.date = e.date.toDate());

        this.setPickerDate(this.date);
        this.setPickerDisabled(this.disabled);
    }

    private setPickerDate(date: Date) {
        this.pickerFunctions.date(date ? date : null);
    }

    private setPickerDisabled(disabled: boolean) {
        if (disabled)
            this.pickerFunctions.disable();
        else
            this.pickerFunctions.enable();
    }

    private get pickerFunctions(): any {
        var element = jQuery('#' + this.id);
        return element.data("DateTimePicker");
    }
}

The problem is that the styles: [''] of the Component attributes is not applied.

Do you know why?

I tryed importing a css file and in this way it works, but I want to use the style attribute in order to make the component totally reusable.

Thanks a lot

PS: it is strange also that the css of the library is not applied.. I'm importing it correctly

<link href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

score 2 · Accepted Answer · answered Apr 15 '16 at 12:22

2

I think this should work:

    :host >>> .test {
        background-color: green;
    }

The CSS is not applied because your dynamically added HTML doesn't have the classes applied Angular uses to emulate style encapsulation. Using the "shadow piercing" CSS combinator should work around it.

answered Apr 15 '16 at 12:22

Günter Zöchbauer

623,577
216
2,003
1,567

Thank you, in this way it works! Can you please explain better (or add link) the problem and what is a "shadow piercing"? Thanks a lot again – user3471528 Apr 15 '16 at 12:40
Angular adds unique generated class names to your HTML elements and rewrites the selectors in your CSS to only match the elements in the current component. When you add HTML dynamically these classes are not added and no CSS matches. The shadow piercing combinator comes from shadow DOM (was deprecated though but Angular supports it currently directly). `>>>` just influences how the CSS selectors are rewritten by Angular. This way the CSS selectors are less selective and bleed into child components with different (or in your case no) unique class added. – Günter Zöchbauer Apr 15 '16 at 12:44

Apply css in component that uses js library

1 Answers1