title: Angular 6 ng-bootstrap Rating not work
body: <p>Im try to use <code>Angular 6</code> <code>ng-bootstrap</code>  <code>Rating</code> but its not work for me, any one know how to add this rating correctly, </p>
  
  <p><a href="https://ng-bootstrap.github.io/#/components/rating/examples" rel="nofollow noreferrer">NG-RATE</a></p>
  
  <p><strong>that is my code</strong></p>
  
  <p><strong>facilitistatus.component.html</strong></p>
  
  <pre><code>&lt;ngb-rating [(rate)]="currentRate"&gt;&lt;/ngb-rating&gt;
  </code></pre>
  
  <p><strong>facilitistatus.component.ts</strong></p>
  
  <pre><code>export class FacilitistatusComponent implements OnInit {
  
    currentRate = 8;
  }
  </code></pre>
  
  <p><strong>facilitistatus.component.css</strong></p>
  
  <p>/<em>rate</em>/</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Error is </p>
  
  <blockquote>
    <p>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"></p>
  </blockquote>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code> 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 { }
  </code></pre>
  
  <p><strong>facilitistatus.module.ts</strong></p>
  
  <pre><code>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{ }
  </code></pre>