title: ng2-bootstrap progressbar not working
body: <p>I am using the ng2-bootstrap progress bar component in a Angular 2 app built with angular-cli. As suggested by the ng2-bootstrap team I have declared and used the progress bar component as shown below:</p>
  
  <pre><code>import { AlertModule, AccordionModule, ModalModule, ProgressbarModule  } from 'ng2-bootstrap';
  import { ThreedViewerComponent} from './threed-viewer/threed-viewer.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      ThreedViewerComponent,
    ],
    imports: [
      ...        
      AlertModule.forRoot(),
      AccordionModule.forRoot(),
      ModalModule.forRoot(),
      ProgressbarModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {
    public customClass: string = 'customClass';
    public isFirstOpen: boolean = true;
  }
  </code></pre>
  
  <p>the following is my HTML:</p>
  
  <pre><code>&lt;progressbar [max]="max" [value]="dynamic"&gt;
      &lt;span style="color:white; white-space:nowrap;"&gt;{{dynamic}} / {{max}}&lt;/span&gt;
  &lt;/progressbar&gt;
  </code></pre>
  
  <p>and finally my component:</p>
  
  <pre><code>@Component({
    selector: ...  
    templateUrl: ...
  })
  export class myComponent{
    public max: number = 200;
    public showWarning: boolean;
    public dynamic: number;
    public type: string;
  
    ...
  }
  </code></pre>
  
  <p>when I serve the app, theprogress bar generates following error but all other ng2-bootstrap components work fine:</p>
  
  <blockquote>
    <p>Unhandled Promise rejection: Template parse errors: Can't bind to
    'max' since it isn't a known property of 'progressbar'. ("
              </p>
  
  <pre><code>      &lt;progressbar [ERROR -&gt;][max]="max" [value]="dynamic"&gt;
          &lt;span style="color:white; white-space:nowrap;"&gt;{{dynamic}"): ThreedViewerComponent@85:23 Can't
  </code></pre>
    
    <p>bind to 'value' since it isn't a known property of 'progressbar'. ("
              </p>
  
  <pre><code>      &lt;progressbar [max]="max" [ERROR -&gt;][value]="dynamic"&gt;
          &lt;span style="color:white; white-space:nowrap;"&gt;{{dynamic}} / {{max}}&lt;"): ThreedViewerComponent@85:35 'progressbar' is not a known
  </code></pre>
    
    <p>element:
    1. If 'progressbar' is an Angular component, then verify that it is part of this module.
    2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component
    to suppress this message. ("
              </p>
  
  <pre><code>      [ERROR -&gt;]&lt;progressbar [max]="max" [value]="dynamic"&gt;
          &lt;span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:
  </code></pre>
    
    <p>1. If 'progressbar' is an Angular component, then verify that it is part of this module.
    2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component
    to suppress this message. ("          
                [ERROR ->]
                
                    &copy; 2017 "): ThreedViewerComponent@91:12 ; Zone:  ; Task: Promise.then ; Value: SyntaxError
    {__zone_symbol__error: Error: Template parse errors: Can't bind to
    'max' since it isn't a known property of 'progressbar'. …,
    _nativeError: ZoneAwareError, __zone_symbol__currentTask: ZoneTask, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'max' …ttp://localhost:4200/polyfills.bundle.js:3011:35)",
    __zone_symbol__message: "Template parse errors:↵Can't bind to 'max' since i…     &copy; 2017 ↵"): ThreedViewerComponent@91:12"} Error:
    Template parse errors: Can't bind to 'max' since it isn't a known
    property of 'progressbar'. ("
              </p>
  
  <pre><code>      &lt;progressbar [ERROR -&gt;][max]="max" [value]="dynamic"&gt;
          &lt;span style="color:white; white-space:nowrap;"&gt;{{dynamic}"): ThreedViewerComponent@85:23 Can't
  </code></pre>
    
    <p>bind to 'value' since it isn't a known property of 'progressbar'. ("
              </p>
  
  <pre><code>      &lt;progressbar [max]="max" [ERROR -&gt;][value]="dynamic"&gt;
          &lt;span style="color:white; white-space:nowrap;"&gt;{{dynamic}} / {{max}}&lt;"): ThreedViewerComponent@85:35 'progressbar' is not a known
  </code></pre>
    
    <p>element:
    1. If 'progressbar' is an Angular component, then verify that it is part of this module.
    2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component
    to suppress this message. ("
              </p>
  
  <pre><code>      [ERROR -&gt;]&lt;progressbar [max]="max" [value]="dynamic"&gt;
          &lt;span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:
  </code></pre>
    
    <p>1. If 'progressbar' is an Angular component, then verify that it is part of this module.
    2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component
    to suppress this message. ("          
                [ERROR ->]
                
                    &copy; 2017 "): ThreedViewerComponent@91:12
        at SyntaxError.ZoneAwareError (<a href="http://localhost:4200/polyfills.bundle.js:3457:33" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:3457:33</a>)
        at SyntaxError.BaseError [as constructor] (<a href="http://localhost:4200/vendor.bundle.js:86968:16" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:86968:16</a>)
        at new SyntaxError (<a href="http://localhost:4200/vendor.bundle.js:10223:16" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:10223:16</a>)
        at TemplateParser.parse (<a href="http://localhost:4200/vendor.bundle.js:22316:19" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:22316:19</a>)
        at JitCompiler._compileTemplate (<a href="http://localhost:4200/vendor.bundle.js:54413:68" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:54413:68</a>)
        at <a href="http://localhost:4200/vendor.bundle.js:54296:62" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:54296:62</a>
        at Set.forEach (native)
        at JitCompiler._compileComponents (<a href="http://localhost:4200/vendor.bundle.js:54296:19" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:54296:19</a>)
        at createResult (<a href="http://localhost:4200/vendor.bundle.js:54178:19" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:54178:19</a>)
        at ZoneDelegate.webpackJsonp.807.ZoneDelegate.invoke (<a href="http://localhost:4200/polyfills.bundle.js:2799:26" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:2799:26</a>)
        at Zone.webpackJsonp.807.Zone.run (<a href="http://localhost:4200/polyfills.bundle.js:2591:43" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:2591:43</a>)
        at <a href="http://localhost:4200/polyfills.bundle.js:3178:57" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:3178:57</a>
        at ZoneDelegate.webpackJsonp.807.ZoneDelegate.invokeTask (<a href="http://localhost:4200/polyfills.bundle.js:2832:31" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:2832:31</a>)
        at Zone.webpackJsonp.807.Zone.runTask (<a href="http://localhost:4200/polyfills.bundle.js:2631:47" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:2631:47</a>)
        at drainMicroTaskQueue (<a href="http://localhost:4200/polyfills.bundle.js:3011:35" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:3011:35</a>)</p>
  </blockquote>
  
  <p>Can you please help?</p>