title: How can I manually control the progress of the @ngx-progressbar/core progress bar in Angular5/Ionic4
body: <p>I am trying to get a progress bar in my application. I found the @ngx-progressbar/core which looks promising. But for some reason, I can't manage to control it's progress. Whatever I do, as soon as the progress increases some, it just increases all the way in leaps and bounds without any control. I was hoping to increase it in steps from observables.</p>
  
  <p>This is what I tried now, with Ionic, but that shouldn't really matter as it is basically just Angular. I am using version 4.3 of @ngx-progressbar/core and Angular 5 and Ionic 4.</p>
  
  <p>The component:</p>
  
  <pre><code>import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { NgProgressComponent } from '@ngx-progressbar/core';
  
  @IonicPage()
  @Component({
    selector: 'page-test',
    templateUrl: 'test.html',
  })
  export class TestPage implements AfterViewInit{
    @ViewChild(NgProgressComponent) progress: NgProgressComponent;
  
  
    constructor(
      public navCtrl: NavController,
      public navParams: NavParams
    ) { }
  
    ngAfterViewInit() {
      console.log("Starting progress");
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad TestPage');
    }
  </code></pre>
  
  <p>The template:</p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;ng-progress&gt;&lt;/ng-progress&gt;
    &lt;button ion-button color="primary" outline round (click)="this.progress.inc(5);"&gt;Inc&lt;/button&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>I was expecting the progress bar to increase by 5% with every click, but as soon as I click it, no matter what the argument to progress.inc() is, it just starts to fill the whole progress bar. If I .start() the progress bar, it fills up straight away.</p>