File
Implements
Constructor
constructor(navParams: NavParams, platform: Platform, popoverCtrl: PopoverController)
|
|
Parameters :
Name |
Type |
Optional |
navParams |
NavParams
|
No
|
platform |
Platform
|
No
|
popoverCtrl |
PopoverController
|
No
|
|
Methods
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
onSuccessClick
|
onSuccessClick()
|
|
|
backButtonFunc
|
Type : Subscription
|
|
Public
navParams
|
Type : NavParams
|
|
import { Component, OnDestroy } from '@angular/core';
import { Platform, NavParams, PopoverController } from '@ionic/angular';
import { Subscription} from 'rxjs';
@Component({
selector: 'app-toast-navigation',
templateUrl: './toast-navigation.component.html',
styleUrls: ['./toast-navigation.component.scss'],
})
export class ToastNavigationComponent implements OnDestroy {
message: any;
description: any;
btnText: any;
backButtonFunc: Subscription;
constructor(
public navParams: NavParams,
private platform: Platform,
private popoverCtrl: PopoverController,
) {
this.message = this.navParams.get('message');
this.description = this.navParams.get('description');
this.btnText = this.navParams.get('btnText');
}
ionViewWillEnter() {
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
this.popoverCtrl.dismiss();
this.backButtonFunc.unsubscribe();
});
}
ngOnDestroy(): void {
if (this.backButtonFunc) {
this.backButtonFunc.unsubscribe();
}
}
onSuccessClick() {
this.popoverCtrl.dismiss(true);
}
}
<ion-content class="toast-container">
<div *ngIf="message">
<div>
{{message}}
</div>
<div *ngIf="description">
{{description}}
</div>
<div>
<button [ngClass]="btn.btnClass" *ngFor="let btn of actionsButtons"
(click)='onSuccessClick()'> {{btn.btntext }}</button>
</div>
</div>
</ion-content>
@import "src/assets/styles/_variables.scss";
.toast-container{
--padding-top: 16px;
--padding-bottom: 16px;
--padding-start: 16px;
--padding-end: 16px;
--background: #{$gray-800};
--color: #{$white};
}
.btn-right{
float: right;
background-color: map-get($colors, primary_black);
padding: 12px;
color: map-get($colors, vivid_orange);
font-family: "Noto Sans", sans-serif;
font-size: $font-size-base;
text-transform: uppercase;
}
Legend
Html element with directive