valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

Add service with observables for tab module #5031

Open l4cr0ss opened 5 years ago

l4cr0ss commented 5 years ago

Bug description or feature request:

Feature request: a service for the tabs plugin similar to the modal that dispatches observable events like tabChangeStart and tabChangeComplete.

We are using the tab plugin to switch between list filters. Sometimes it takes a few seconds to render the new tab resulting in a lag between the user clicking and the user seeing a result. We'd like to be able to show a spinner while the tab is loading, but we're having trouble finding a hook to use to fire the spinner.hide() method.

Plunker/StackBlitz that reproduces the issue:

I think this scenario is easy to imagine, but if you'd like I will happily create a stackblitz to demonstrate the lag.

Edit: https://stackblitz.com/edit/angular-ngx-bootstrap-tabs

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 2.0.5

Angular: 7

Bootstrap: 4

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI

l4cr0ss commented 5 years ago

Bump

ludmilanesvitiy commented 5 years ago

@l4cr0ss Hello! Please provide a reproduction via StackBlitz. Starter template: https://stackblitz.com/edit/ngx-bootstrap

l4cr0ss commented 5 years ago

@ludmilanesvitiy Thank you kindly for reviewing this issue. Please allow me another day or two to provide this StackBlitz for you. We are in the middle of a large deployment at work and I have not yet been able to break away, but remain very interested in seeing how we might resolve this feature request.

l4cr0ss commented 5 years ago

I've created a StackBlitz demonstrating the issue. I'm including a link in this comment and I will edit the issue to include it as well.

Please notice how the spinner never appears. That is what I am having a problem with.

https://stackblitz.com/edit/angular-ngx-bootstrap-tabs

l4cr0ss commented 5 years ago

A concept similar to what I'm describing is implemented by the angular router. The router emits lifecycle events which can be subscribed to. Can we do something similar for the tab component?

ludmilanesvitiy commented 5 years ago

@Domainv Could you please, investigate and prioritize?

Domainv commented 5 years ago

Tabs should be completely refactored in the future. This feature request will be taken into account.