Bind progress button observable

[James]

How do I bind the progress button to an observable to start the animation when a boolean is true and end the animation when it is false.?

Your current documentation does not show how to start or stop the animation. I would think this is a primary use case when waiting for an API to return. 

Please update your documentation with example on starting and stopping the animation programatically.  

[Madhan Venkateshan]

Hi James, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We would like to suggest you to use progress event to end the animation of the progress button using progressComplete method when the boolean changed to true. Please refer the below sample link. 

 

https://www.syncfusion.com/downloads/support/forum/148845/ze/progressbutton1371325190 

 

App.component.ts 

progress(args: ProgressEventArgs) { 

    if(this.isCompleted) { 

      this.progressObj.progressComplete(); 

      this.isCompleted = false; 

    } 

  } 

 

 

Sorry for the inconvenience caused. We will update the documentation in our upcoming release. 

 

Regards, 

Madhan V 

[Leandro Ortiz]

There is a way to show the progress without setting a duration?

In your example, you're setting 10 seconds as the duration but it doesn't look like a good solution.

I'd like to show the progress when the user clicks the button and stop when the process has been done. But in some cases, the process could take more or less time and the spinner button may be shown or hide when has not to.

Do you have an example or documentation for this cases?

[Aravinthan Seetharaman]

Hi Leandro, 

 

We have checked your query. We would like to let you know that this is our control behaviour. And we suggest you to set the maximum duration using duration property and start and stop the progress using methods available in ProgressButton. Please refer the below code snippet and sample. 

 

app.component.html 

 

<button ejs-progressbutton #progressObj content="Spin Left" [isPrimary]="true" [duration]="isDuration" (progress)="progress($event)"></button> 

 

 

app.component.ts 

 

export class AppComponent { 

  @ViewChild('progressObj') 

  public progressObj: ProgressButtonComponent; 

  isDuration: number = 1000 * 60 * 59 + 59 * 1000; 

 

  onStart() { 

    this.progressObj.start(); 

  } 

  onStop() { 

    this.progressObj.progressComplete(); 

  } 

} 

 

 

Sample: https://stackblitz.com/edit/angular-xmznna-jzpdga?file=app.component.ts  

 

Could you please check the above details and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S