Spinner alert Ionic

Question

I want show an alert with a spinner in subTitle like:

I tryed, without success:

this.alertCtrl.create({
   title: 'Verificando',
   subTitle: '<ion-spinner name="dots"></ion-spinner> foo bar'
});

Any ideas ?

Answer 1

Unfortunately AlertController from Ionic 2 doesn't offer a way by default to embed HTML code inside the title/subtitle attribute. Will this alert be used only when you are loading something? On that case I suggest that you use the LoadingController component, with LoadingController it's possible to insert html embedded code as the content attribute.

For instance, on this case I have created a custom CSS animation on class .sp .sp-slices that I'm inserting on the LoadingController variable named loadingCtrl:

this.loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: '<div class="sp sp-slices"></div>'
          });
this.loading.present();

Using this should give you flexibility enough to adjust the LoadingController component to look exactly like what you need.

Ionic 2 also offers other LoadingController designs that are much closer to the native default look for Android iOS and Windows Phone. It's worthy taking a look at their API documentation: https://ionicframework.com/docs/api/components/loading/LoadingController/