File
Index
Properties
|
|
Methods
|
|
Accessors
|
|
Constructor
constructor(params: NavParams, modal: ModalController, headerService: AppHeaderService)
|
|
Parameters :
Name |
Type |
Optional |
params |
NavParams
|
No
|
modal |
ModalController
|
No
|
headerService |
AppHeaderService
|
No
|
|
Methods
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
Public
modal
|
Type : ModalController
|
|
options
|
Type : object
|
Default value : {
surveyCompleted: { img: '../../assets/imgs/submitted.svg', msg: 'Your form is Submitted!' },
surveyExpired: { img: '../../assets/imgs/survey-expired.svg', msg: 'Sorry! the form has expired.' },
entityNotMapped: { img: '../../assets/imgs/entity-not-mapped.svg', msg: 'Sorry! You are not mapped to an entity' },
}
|
|
Public
params
|
Type : NavParams
|
|
import { Component } from '@angular/core';
import { AppHeaderService } from '@app/services';
import { ModalController, NavParams } from '@ionic/angular';
@Component({
selector: 'app-survey-msg',
templateUrl: './survey-msg.component.html',
styleUrls: ['./survey-msg.component.scss'],
})
export class SurveyMsgComponent {
text: string;
options = {
surveyCompleted: { img: '../../assets/imgs/submitted.svg', msg: 'Your form is Submitted!' },
surveyExpired: { img: '../../assets/imgs/survey-expired.svg', msg: 'Sorry! the form has expired.' },
entityNotMapped: { img: '../../assets/imgs/entity-not-mapped.svg', msg: 'Sorry! You are not mapped to an entity' },
};
option: any;
showClose: any;
showMenu: any;
constructor(public params: NavParams, public modal: ModalController, private headerService:AppHeaderService) {
this.option = this.params.get('option');
this.showMenu = this.params.get('showMenu') || false;
if (this.showMenu == false) {
this.showClose = true; // if menu is not shown then close button is show on model
}
}
close() {
this.modal.dismiss()
}
ionViewWillEnter() {
this.headerService.showHeaderWithBackButton();
}
get data(): any {
return this.options[this.option];
}
}
<ion-content padding>
<div class="dm-header ion-padding" role="button" aria-label="back">
<ion-icon
name="arrow-back" role="button" aria-label="back"
(click)="close()"
class="top-back-button"
></ion-icon>
</div>
<div class="_flex-box _flex-direction-column">
<img [src]="data?.img" alt="Thanks" />
<h2 class="lightMessage">{{ data?.msg }}</h2>
</div>
</ion-content>
@import 'src/assets/styles/_variables.scss';
@import 'src/assets/styles/_custom-mixins';
@import 'src/assets/styles/base/_variables.scss';
.top-back-button {
font-size: 1.25rem;
@include rtl() {
float: right;
}
}
img {
width: 70%;
}
.lightMessage {
font-weight: 200;
color: $gray-400;
text-align: center;
}
Legend
Html element with directive