Won't work in Anguler - CLI

[SimoneMSR]

After applying correction from #24 i get these error when importing ng2-slider component

Unhandled Promise rejection: Template parse errors: Can't bind to 'styleBlock' since it isn't a known property of 'div'. ( Can't bind to 'boundElement' since it isn't a known property of 'span'. (" Can't bind to 'dynamicRightLimit' since it isn't a known property of 'span'. (" Can't bind to 'parent' since it isn't a known property of 'span'. (" Can't bind to 'step' since it isn't a known property of 'span'. (" Can't bind to 'boundElement' since it isn't a known property of 'span'. (" Can't bind to 'dynamicLeftLimit' since it isn't a known property of 'span'. (" Can't bind to 'step' since it isn't a known property of 'span'. ("

I import the component in my module.declarations property with this
import {Ng2SliderComponent} from "ng2-slider-component/ng2-slider.component"; ... declarations: [Ng2SliderComponent]

Tested with:
typescript: "~2.0.3"
angular/compiler-cli: "^2.3.1"
angular-cli: 1.0.0-beta.24

[ShakurOo]

You have importing the directives SlideAbleDirective and Ng2StyledDirective .

import { Ng2StyledDirective } from "ng2-styled-directive/ng2-styled.directive";
import { SlideAbleDirective } from "ng2-slideable-directive/slideable.directive";

[SimoneMSR]

Ok, now I see two input fields but no slider, but it seems that css classes have not been loaded. Could you provide also some on this? Thank you!!

[AlicePrincess]

has error:moduleId should be a string in "Ng2SliderComponent"

[rach12345]

@AlicePrincess: We can get rid of the error: moduleId should be a string by:

1. Traverse to the node_modules\ng2-slider-component\ng2-slider.component.js
2. In lines (400-405approx),in the prototype of Ng2SliderComponent, we have module.id
3. This should be changed to moduleId: module.id+"",

[amitgaur208]

Not working at all with angular cli, I have imported the module in app.module.ts

import { Ng2SliderComponent } from 'ng2-slider-component/ng2-slider.component';
import { SlideAbleDirective } from 'ng2-slideable-directive/slideable.directive';
import { Ng2StyledDirective } from 'ng2-styled-directive/ng2-styled.directive';

and then imported the component like this

imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
Ng2SliderComponent,
],

but not working at all when i add module name in import or declaration and its not loading the page.

[amitgaur208]

Can anyone suggest me other range slider for angular cli??

[rach12345]

Hi @amitgaur208 ,

I tried the same, but could not integrate Ng2-Slider with angular cli project. I was just able to see 2 input boxes, where we can increment/decrement the number, but no slider at all. On inspecting I did not observe a css for the same.
Hence i did not use this slider further.

However, we have various options available for the sliders too. It depends on the requirement you need to fulfill.
Below are the libraries which support sliders:
1. MDL sliders (supports single ring)
2. PrimeNG sliders (supports double rings, but did not find a suitable example for step size<1)
3. nouislider and ng2 nouislider(supports double ring, and step size<1)

[amitgaur208]

Thanks @rach12345. I have integrated PrimeNg slider, its just awesome provided too many other tools.

[ghost]

Please just add a note to the readme file saying this directive/component doesn't work on Angular-Cli.

[V2NileshSukalikar]

anyone fix this problem. I am still facing the same issue.

[DharmalingamViky]

Not able to integrate into Angular-cli project since it's not loading css files properly even though if I include all dependencies in my app module.

[DharmalingamViky]

Steps done by me below

After installation of components and its dependency

Step 1 : added the below lines in angular-cli.json file
"../node_modules/ng2-slider-component/ng2-slider.component.js",
"../node_modules/ng2-slideable-directive/slideable.directive.js",
"../node_modules/ng2-styled-directive/ng2-styled.directive.js"

Step 2 : imported below line in my app module
import { Ng2SliderComponent } from 'ng2-slider-component/ng2-slider.component';
import { SlideAbleDirective } from 'ng2-slideable-directive/slideable.directive';
import { Ng2StyledDirective } from 'ng2-styled-directive/ng2-styled.directive';

Step 3: add the below line in same app module file

declarations: [
SlideAbleDirective,
Ng2StyledDirective,
Ng2SliderComponent
],

Step 4: Added below line in template

<ng2-slider
min="6"
max="23"
startValue="9"
endValue="21"
stepValue="2"
[normalHandlerStyle]="{ 'background-color': 'green'}"
[slidingHandlerStyle]="{
'border-radius': '9px',
'background-color': 'red'
}">

[DharmalingamViky]

error message in console

Ng2SliderComponent.html:28 ERROR TypeError: Cannot read property 'component' of undefined
at Ng2StyledDirective.webpackJsonp.../../../../ng2-styled-directive/ng2-styled.directive.js.Ng2StyledDirective.ngAfterViewInit (ng2-styled.directive.js:26)
at callProviderLifecycles (core.es5.js:11182)
at callElementProvidersLifecycles (core.es5.js:11157)
at callLifecycleHooksChildrenFirst (core.es5.js:11141)
at checkAndUpdateView (core.es5.js:12246)
at callViewAction (core.es5.js:12603)
at execComponentViewsAction (core.es5.js:12535)
at checkAndUpdateView (core.es5.js:12244)
at callViewAction (core.es5.js:12603)
at execComponentViewsAction (core.es5.js:12535)

[azyth]

I was having the same issues as @DharmalingamViky. If you see the issue i just raised on the other package, i was able to resolve the issue with a hack. If @Bogdan1975 is able to update his node module dependecies within this package it should resolve this issue.