src/app/components/popups/sb-progress-loader/sb-progress-loader.page.ts
OnInit
OnDestroy
selector | app-sb-progress-loader |
styleUrls | ./sb-progress-loader.page.scss |
templateUrl | ./sb-progress-loader.page.html |
Properties |
|
Methods |
Inputs |
constructor(platform: Platform)
|
||||||
Parameters :
|
progress | |
Type : Observable<number>
|
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
Private backButtonSubscription |
Type : Subscription
|
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Platform} from '@ionic/angular';
import {Observable, Subscription} from 'rxjs';
@Component({
selector: 'app-sb-progress-loader',
templateUrl: './sb-progress-loader.page.html',
styleUrls: ['./sb-progress-loader.page.scss'],
})
export class SbProgressLoaderPage implements OnInit, OnDestroy {
private backButtonSubscription: Subscription;
@Input()
public progress: Observable<number>;
constructor(private platform: Platform
) {
}
ngOnInit() {
this.backButtonSubscription = this.platform.backButton.subscribeWithPriority(11, () => {
});
}
ngOnDestroy(): void {
if (this.backButtonSubscription) {
this.backButtonSubscription.unsubscribe();
}
}
}
<ion-content>
<div class="content">
<img src="/assets/imgs/book.gif" alt="book"/>
<ion-progress-bar class="progress" color="primary" [value]="(progress | async) / 100"></ion-progress-bar>
<p class="load-status">{{'LOADER_PROGRESS_DESCRIPTION' | translate}}</p>
<p class="load-status">{{'LOADER_PROGRESS_DESC_SUB_HEADING' | translate}}</p>
</div>
</ion-content>
./sb-progress-loader.page.scss
@import "src/assets/styles/_variables.scss";
.content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
width: 100vw;
.progress {
width: 70vw;
margin-bottom: 10px;
}
.load-status {
margin-top: 5px;
font-size: 1.188rem;
font-weight: bold;
}
}