Issue
Edit - My hack solution: The issue has to do with how/when/where angular is getting the NoUiSlider CSS. What made this work was adding the css import @import "~nouislider/distribute/nouislider.min.css";
to my src > styles.css file.
I do not consider this an actual solution. I would like all of the css for the slider to be contained inside the component's CSS file. So I guess my updated question is: How do I get NoUiSlider to use the CSS from the component that contains it?
Original question:
My slider will not show up in my Angular application. What am I missing?
I'm simply trying to get the most basic slider to render in my application and I get no errors as far as I can tell.
--
package.json
-- I'll add more if needed ( I've also tried placing "nouislider": "^14.1.1",
in "dependencies"
)
{
...
"devDependencies": {
...
"@types/nouislider": "^9.0.6",
"nouislider": "^14.1.1",
...
}
}
--
timeline-scroller.component.html
('Test text
' is the only thing that I see when my page renders)
<div #contentComponent>Test text</div>
--
timeline-scroller.component.ts
(, {static: true}
is a new requirement in angular 8)
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import * as noui from 'nouislider';
@Component({
selector: 'app-timeline-scroller',
templateUrl: './timeline-scroller.component.html',
styleUrls: ['./timeline-scroller.component.css']
})
export class TimelineScrollerComponent implements AfterViewInit {
@ViewChild('contentComponent', {static: true}) contentElement: ElementRef;
public slider: noui.noUiSlider;
constructor() { }
ngAfterViewInit(): void {
this.slider = noui.create(
this.contentElement.nativeElement, {
start: 1,
range: { min: 0, max: 20 }
});
}
}
Solution
In order to use the libraries css in my component I needed to set the component encapsulation to `encapsulation: ViewEncapsulation.None'
My component decorator then became:
@Component({
selector: 'app-timeline-scroller',
templateUrl: './timeline-scroller.component.html',
styleUrls: ['./timeline-scroller.component.css'],
encapsulation: ViewEncapsulation.None
})
Then in my slider.component.css
I was able to add the import:
@import "~nouislider/distribute/nouislider.min.css";
Answered By - Jmaurier
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.