Check out the Plunker where I'm facing an issue. "If you comment out the styles in the ThirdComponent, you can see it affecting the parent and sibling components' styles." – adriancarriger (Special thanks to Adrian)
Within my component, I am incorporating...
styles: ['
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css";
']
However, it appears to disrupt the styling of any component that references this one. I only intend for the style to apply to this specific component. I was under the impression that Angular 2 components were completely independent, so I am puzzled as to why this particular component is impacting the entire web app.
Component:
import { Component, OnInit } from '@angular/core';
import datetimepicker from 'eonasdan-bootstrap-datetimepicker';
import moment from 'moment';
@Component({
selector: 'date-time-picker',
styleUrls: ['../../../css/datetimepicker.css'],
template:`
<div class="input-group">
<input class="form-control"
a2e-datetimepicker
[date]="date"
[options]="a2eOptions"
(onChange)="dateChange($event)"
(onClick)="dateClick()"
/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
`
})
export class DateTimePicker implements OnInit {
date: moment.Moment;
a2eOptions: any;
dateChange(date) {
this.date = date;
}
dateClick() {
console.log('click click!')
}
getTime() {
alert('Selected time is:' + this.date);
};
addTime(val, selector) {
this.date = moment(this.date.add(val, selector));
};
clearTime() {
this.date = null;
};
constructor(){
this.date = moment();
this.a2eOptions = {
format: 'dddd, MMMM Do YYYY, h:mm a',
//sideBySide: true,
stepping: 5
};
}
ngOnInit(): void {
console.log(datetimepicker);
}
}
datetimepicker.css
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css";
Similar outcomes occur if implemented this way:
template:`
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
Utilizing systemJS