Angular wrapper of JS library doesn't load styles

Question

I want to use this library https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range in my application. But it has to be angular component so for the first time in my short career I wanted to create wrapper of library but I think I did something wrong becouse It doesn't looke like original picker.

This is how it should looks like:

And this is how it looks like as my angular component:

Also when I want to select only month or year it looks weird:

Ok so now time to see my component code:

import {AfterViewInit, Component, ElementRef, Input, OnInit} from 
'@angular/core';
import 'bootstrap-datepicker';
declare var $;


@Component({
selector: 'cb-daterangepicker',
templateUrl: './daterangepicker.component.html',
styleUrls: ['./daterangepicker.component.scss']
})
export class DaterangepickerComponent implements OnInit, AfterViewInit {

@Input()
datepickerOptions: DatepickerOptions;

constructor(private elementRef: ElementRef) {
}

ngOnInit() {

}

ngAfterViewInit(): void {
    // $(this.elementRef.nativeElement).datepicker();

    $('.input-daterange input').each(function() {
        $(this).datepicker('clearDates');
    });
}

}

As You see there is no for example selection of range, or just start and end dates, it simply looks different so I thought it becouse not loaded styles but I might be wrong. I need Your help Guys, maybe my wrapper isn't correctly done?

*Network console with styles:

Addin styles to index.html and angular.json helped with some things:

But still range between dates is not highlighted..

Answer 1

Are you sure that bootstrap is correctly loaded ? you have to check this first and you have to check if the css for the library is loaded afterwards. try to check that with the browser network console :) othewise try to call the library style with the cdn :

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css