Angular 6 ng-bootstrap Rating not work

Question

Im try to use Angular 6 ng-bootstrap Rating but its not work for me, any one know how to add this rating correctly,

NG-RATE

that is my code

facilitistatus.component.html

<ngb-rating [(rate)]="currentRate"></ngb-rating>

facilitistatus.component.ts

export class FacilitistatusComponent implements OnInit {

  currentRate = 8;
}

facilitistatus.component.css

/rate/

.star {
  font-size: 1.5rem;
  color: #b0c4de;
}
.filled {
  color: #1e90ff;
}
.heart {
  position: relative;
  display: inline-block;
  font-size: 3rem;
  color: #d3d3d3;
}
.full {
  color: red;
}
.half {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  color: red;
}

Error is

core.js:1598 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'rate' since it isn't a known property of 'ngb-rating'. 1. If 'ngb-rating' is an Angular component and it has 'rate' input, then verify that it is part of this module. 2. If 'ngb-rating' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][(rate)]="currentRate">

app.module.ts

 import * as $ from 'jquery';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { Routes, RouterModule } from '@angular/router';
    import { FullComponent } from './layouts/full/full.component';
    import { BlankComponent } from './layouts/blank/blank.component';

    import { NavigationComponent } from './shared/header-navigation/navigation.component';
    import { SidebarComponent } from './shared/sidebar/sidebar.component';
    import { BreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
    import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
    import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

    import { Approutes } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { SpinnerComponent } from './shared/spinner.component';
    import { CreatePropertyComponent } from './create-property/create-property.component';

    const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
      suppressScrollX: true,
      wheelSpeed: 2,
      wheelPropagation: true,
    };

    @NgModule({
      declarations: [
        AppComponent,
        SpinnerComponent,
        FullComponent,
        BlankComponent,
        NavigationComponent,
        BreadcrumbComponent,
        SidebarComponent,
        CreatePropertyComponent,








      ],
      imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(Approutes, { useHash: false }),
        PerfectScrollbarModule
      ],
      providers: [
          {
          provide: PERFECT_SCROLLBAR_CONFIG,
          useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
        },{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
      }],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

facilitistatus.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import {FacilitistatusComponent} from './facilitistatus.component';



const routes: Routes = [{
  path: '',
  data: {
    title: '',
    urls: [{title: 'Dashboard',url: '/dashboard1'},{title: 'Facility Status'}]
  },
  component: FacilitistatusComponent
}];

@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [FacilitistatusComponent]
})
export class FacilitistatusModule{ }

Answer 1

You should import module on your facilitistatus.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {FacilitistatusComponent} from './facilitistatus.component';



const routes: Routes = [{
  path: '',
  data: {
    title: '',
    urls: [{title: 'Dashboard',url: '/dashboard1'},{title: 'Facility Status'}]
  },
  component: FacilitistatusComponent
}];

@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    RouterModule.forChild(routes),
    NgbModule
  ],
  declarations: [FacilitistatusComponent]
})
export class FacilitistatusModule{ }