Can't bind to 'step' since it isn't a known property of 'nouislider'

Question

I keep getting this error when I do ng serve that it Can't bind to 'ngModel' since it isn't a known property of 'nouislider' Can't bind to 'tooltips' since it isn't a known property of 'nouislider'. : Can't bind to 'step' since it isn't a known property of 'nouislider'. so many of this different errors but I believe the fix would be one for all of them

Error: src/app/main/print-layouts/print-options/print-options.component.html:56:17 - error NG8002: Can't bind to 'behaviour' since it isn't a known property of 'nouislider'.

56                 [behaviour]="'tap'"
                   ~~~~~~~~~~~~~~~~~~~

  src/app/main/print-layouts/print-options/print-options.component.ts:8:16
    8   templateUrl: "./print-options.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrintOptionsComponent.


Error: src/app/main/print-layouts/print-options/print-options.component.html:57:17 - error NG8002: Can't bind to 'max' since it isn't a known property of 'nouislider'.

57                 [max]="20"
                   ~~~~~~~~~~

  src/app/main/print-layouts/print-options/print-options.component.ts:8:16
    8   templateUrl: "./print-options.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrintOptionsComponent.


Error: src/app/main/print-layouts/print-options/print-options.component.html:58:17 - error NG8002: Can't bind to 'step' since it isn't a known property of 'nouislider'.

58                 [step]="1"
                   ~~~~~~~~~~

  src/app/main/print-layouts/print-options/print-options.component.ts:8:16
    8   templateUrl: "./print-options.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrintOptionsComponent.


Error: src/app/main/print-layouts/print-options/print-options.component.html:59:17 - error NG8002: Can't bind to 'tooltips' since it isn't a known property of 'nouislider'.

59                 [tooltips]="true"
                   ~~~~~~~~~~~~~~~~~

  src/app/main/print-layouts/print-options/print-options.component.ts:8:16
    8   templateUrl: "./print-options.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrintOptionsComponent.


Error: src/app/main/print-layouts/print-options/print-options.component.html:60:17 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'nouislider'.

60                 [(ngModel)]="sliderWithNgModel"
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/main/print-layouts/print-options/print-options.component.ts:8:16
    8   templateUrl: "./print-options.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrintOptionsComponent.

Any idea how can I fix it?

You need to import the right module. For example, you need to import `FormsModule` before you can use `ngModule`. — skouch2022, Aug 31 '23 at 01:43
Could you update your question to include `@NgModule({...})` setup? Also, which library is the `nouislider`? Is it this one https://www.npmjs.com/package/ng2-nouislider? — skouch2022, Aug 31 '23 at 01:50
Remember: each time we use a "library component/directive" (e.g. the NouisliderComponent and the directive NgModel) in our component, we need import the module of the library (e.g. the NouisliderModule and the FormsModule) in the module **where our component is declared**. If we use standalone component in the array `imports` of the component. Think in a component as "something" you can use in another app, so you need indicate all the resources it use. — Eliseo, Aug 31 '23 at 06:38
If you are using `standalone` component, you need to `imports` `FormsModule` inside the `@Component({..., standalone: true, imports: [FormsModule], ...})`. If you are _not_ using `standalone` component, you need to import `FormModule` in the same `@NgModule` as you declare your `printOptions` component. Something like this: `@NgModule({declarations: [printOptionsComponent], imports: [FormModule, ...],...})` — skouch2022, Aug 31 '23 at 14:16

Can't bind to 'step' since it isn't a known property of 'nouislider'

0 Answers0