src/app/components/acknowledge-response/acknowledge-response.component.ts
OnInit
OnDestroy
| selector | acknowledge-response |
| styleUrls | ./acknowledge-response.component.scss |
| templateUrl | ./acknowledge-response.component.html |
Properties |
Methods |
|
Outputs |
constructor(commonUtilService: CommonUtilService)
|
||||||
|
Parameters :
|
| popupDismiss | |
Type : EventEmitter
|
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| Async ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| appName |
Type : string
|
Default value : ''
|
import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { CommonUtilService } from '@app/services';
@Component({
selector: 'acknowledge-response',
templateUrl: './acknowledge-response.component.html',
styleUrls: ['./acknowledge-response.component.scss']
})
export class AcknowledgeResponseComponent implements OnInit, OnDestroy {
@Output() popupDismiss = new EventEmitter();
appName = '';
constructor(
private commonUtilService: CommonUtilService
) {
}
async ngOnInit() {
this.appName = await this.commonUtilService.getAppName();
}
ngOnDestroy(): void {
this.popupDismiss.emit('closed');
}
}
<div class="container">
<div class="header container top-unset">
<div class="inner-container">
<ion-icon class="icon-checkmark" class="icon-checkmark" md="md-checkmark-circle"></ion-icon>
<div class="text">{{'FRMELEMNTS_MSG_TICKET_SUBMISSION_SUCCESS' | translate: {'app_name': appName} }}</div>
</div>
</div>
</div>
./acknowledge-response.component.scss
@import "src/assets/styles/_variables.scss";
.container {
width: -webkit-fill-available;
height: -webkit-fill-available;
background: map-get($colors, light_black);
position: fixed;
top: 0px;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
z-index: 10;
}
.header {
background-color: map-get($colors, whitish_light_green);
width: 72%;
height: auto;
margin: 0 auto;
border-radius: 10px;
text-align: center;
padding: 8px;
}
.h-6per {
height: 6%;
}
.close {
float: right;
font-weight: bold;
height: 1.88rem;
width: 1.88rem;
margin: 6px 6px 0px 0px;
}
.h-90cent {
height: 80%;
margin-top: 44px;
}
.message {
color: $green;
font-weight: bolder;
}
.m-10 {
margin: 10px 0px;
}
.contact-no {
font-weight: 900;
color: map-get($colors, deep_blue)
}
.btn-call {
width: 90%;
height: 14%;
font-size: 1rem;
color: $white;
background: $green;
margin-top: 24px;
}
.top-unset {
top: unset;
}
.icon-checkmark {
color: $green;
display: block;
width: 3.13rem;
height: 3.13rem;
}
.inner-container {
width: 80%;
height: 60%;
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
}
.text {
color: $green;
font-weight: bold;
font-size: 1.25rem;
margin: 16px 0px;
}