My goal is to integrate a jQueryUI range slider into an Angular2 Component.
doubleRange.ts:
/// <reference path="../../../../../typings/jquery/jquery.d.ts" />
/// <reference path="../../../../../typings/jqueryui/jqueryui.d.ts" />
import { Component, ElementRef, AfterViewInit, Renderer } from 'angular2/angular2'
declare var jQuery:JQueryStatic;
@Component({
selector: 'double-range',
template: `<div id="slider"></div>`,
styleUrls: ['application/common/js/widgets/double-range-widget/double-range-widget.css'],
})
export class DoubleRangeWidget implements AfterViewInit{
constructor(private m_elementRef: ElementRef, private m_renderer: Renderer) {
}
afterViewInit(){
jQuery(this.m_elementRef.nativeElement).find("#slider").slider({
range:true,
});
}
}
This implementation works well and the resulting DOM structure appears like this :
<div id="slider" _ngcontent-xxx-3 class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 36%; width: 34%;"></div>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 36%;"></span>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 70%;"></span>
<div>
However, I encountered an issue when attempting to apply new CSS styles to my component.
In my CSS file, I defined properties for the ui-slider related classes, but the styles are only applied to the <div id="slider"> element due to the presence of the _ngcontent-xxx-3 attribute. The child elements do not inherit this attribute automatically.
Is there a way in Angular2 to automatically add this attribute to all elements within a component, even those generated by jQuery? I would prefer not having to manually search the DOM for these elements and add the attribute in the afterViewInit method.
PS: My Angular2 version is 2.0.0-alpha.46