index.md
Busy indicator backup solution:
Hi there people this gist aims to suply a replacement until Ionic 2 busy operator is done, list of files:
1. First we have the component html, basic version of Ionic 2 alert html, the most important difference is in `[ngClass]="{'busy': isBusy}"`.
2. Then we have the scss, this is a very important part, as we hide the component with transitions and show it only when need it, take a look about the transition of the `z-index`, that's very important.
3. Lastly but the most important is the JS, take care to understand the logic, i use `rxjs/subject` in order to pass events from anywhere in the app to the component through the injectable, you could easily use the subscribe to pass a configuration object with the title, subTitle and message that should go in the busy component.
How to use:
Use it in your `app.html` under the `nav` component:
This file has been truncated. show original
busy-component.html
<div class="container centered" [ngClass]="{'busy': isBusy}" (click)="close()">
<div tappable disable-activated class="backdrop" role="presentation"></div>
<div class="alert-wrapper">
<div class="alert-head">
<h2 id="{{hdrId}}" class="alert-title" *ngIf="d.title" [innerHTML]="d.title"></h2>
<h3 id="{{subHdrId}}" class="alert-sub-title" *ngIf="d.subTitle" [innerHTML]="d.subTitle"></h3>
</div>
<div id="{{msgId}}" class="alert-message" *ngIf="d.message" [innerHTML]="d.message"></div>
</div>
</div>
busy-component.js
import {Injectable, Component, Input, EventEmitter} from 'angular2/core';
import {Subject} from 'rxjs/Subject';
import {IONIC_DIRECTIVES} from 'ionic/ionic';
@Injectable()
export class BusyCtrl {
subject = new Subject()
constructor() {}
This file has been truncated. show original
There are more than three files. show original