File
Constructor
constructor(popOverCtrl: PopoverController, navParams: NavParams, utilityService: UtilityService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| popOverCtrl |
PopoverController
|
No
|
| navParams |
NavParams
|
No
|
| utilityService |
UtilityService
|
No
|
|
Methods
|
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
|
|
|
redirectToPlaystore
|
redirectToPlaystore()
|
|
|
|
|
import { Component } from '@angular/core';
import { NavParams, PopoverController } from '@ionic/angular';
import { XwalkConstants } from '@app/app/app.constant';
import { UtilityService } from '@app/services/utility-service';
@Component({
selector: 'app-dialog-popup',
templateUrl: './dialog-popup.component.html',
styleUrls: ['./dialog-popup.component.scss'],
})
export class DialogPopupComponent {
title: string;
body: any;
buttonText: string;
constructor(
private popOverCtrl: PopoverController,
private navParams: NavParams,
private utilityService: UtilityService
) { }
ionViewWillEnter() {
this.title = this.navParams.get('title');
this.body = this.navParams.get('body');
this.buttonText = this.navParams.get('buttonText');
}
close() {
this.popOverCtrl.dismiss();
}
redirectToPlaystore() {
this.utilityService.openPlayStore(XwalkConstants.APP_ID);
}
}
<ion-content>
<ion-row class="alert-header-padding">
<ion-col size="10">
<div class="alert-header">
<h5 class="alert-header-content"> {{title}} </h5>
</div>
</ion-col>
<ion-col size="2">
<ion-button class="close-button" icon-only fill="clear" (click)="close()">
<ion-icon item-right aria-label="close" role="button" name="close"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<ion-row class="alert-content-body"> {{body}} </ion-row>
<ion-row>
<ion-button expand="full" class="alert-button ion-text-capitalize" (click)="redirectToPlaystore()"> {{buttonText}} </ion-button>
</ion-row>
</ion-content>
@import "src/assets/styles/variables";
@import "src/assets/styles/_variables.scss";
.popover-alert .popover-content {
margin: 0;
width: 100% !important;
max-height: 70% !important;
box-shadow: unset;
position: fixed;
left: 0 !important;
top: unset !important;
bottom: 0;
transform-origin: bottom -100% !important;
transform: translateY(0) !important;
}
.popover-alert ion-backdrop {
background-color: map-get($colors, black) !important;
opacity: 0.4 !important;
}
.popover-alert .close-button{
background-color: map-get($colors, white);
box-shadow: unset;
color: map-get($colors, black);
float: right;
ion-icon {
padding: 0;
margin-top: 10px;
}
}
.popover-alert .alert-header{
margin-left: 2px
}
.popover-alert .col-2{
padding: 0 ;
margin-left: 20px ;
}
.popover-alert .alert-button {
margin-top: 26px;
border-radius: 5px;
}
.popover-alert .alert-header-content{
padding: 0;
margin-left: -7px;
}
.popover-alert .alert-header-padding {
margin-top: -11px;
}
.popover-alert ion-content{
padding: 15px;
}
.popover-alert .alert-content-body{
color: darkgrey;
}
Legend
Html element with directive