Dynamic progress bar in Ionic 4?

Question

So I'm trying to build a progress bar that every time the user press a button the progress bar adds +1%.

html

<ion-button *ngFor="let progress of progress" (click)="add(progress)">Progress</ion-button>
<ion-progress-bar value={{progress}} buffer={{buffer}}></ion-progress-bar>

component file

add(progress){
    this.progress = progress + 1;

  }

For some reason the button is not showing but Logcat show no erros. Am I doing something wrong?

Answer 1

Try

public progress = 1;
public increaseProgress(){
  this.progress = this.progress + 1; 
}

<ion-button (click)="increaseProgress()">Progress</ion-button>
<ion-progress-bar value={{progress}}></ion-progress-bar>