File
Constructor
constructor(translate: TranslateService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| translate |
TranslateService
|
No
|
|
Outputs
|
closeEvents
|
Type : EventEmitter
|
|
|
Methods
|
openDialpad
|
openDialpad()
|
|
|
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'support-acknowledgement',
templateUrl: './support-acknowledgement.component.html',
styleUrls: ['./support-acknowledgement.component.scss']
})
export class SupportAcknowledgement {
@Output() closeEvents = new EventEmitter();
@Input() boardContact: any;
constructor(
private translate: TranslateService
) {}
close() {
this.closeEvents.emit(true);
}
openDialpad() {
window.open('tel:' + this.boardContact.contactinfo.number, '_system');
}
}
<div class="container">
<div class="header">
<div class="h-6per">
<ion-icon name="close" (click)="close()" class="close"></ion-icon>
</div>
<div class="h-90cent">
<h4 class="message">{{'RESPONSE_ACKNOWLEGED' | translate}}</h4>
<span>{{'FOR_SUPPORT' | translate:{'%s': boardContact.name} }}</span>
<div class="m-10">
<span>call</span>
<span class="contact-no"> {{boardContact.contactinfo.number}}</span>
</div>
<span>{{boardContact.message}}</span>
<button (click)="openDialpad()" class="btn-call">Call</button>
</div>
</div>
</div>
@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: $white;
width: 20.688rem;
height: 17.438rem;
margin: 0 auto;
border-radius: 10px;
text-align: center;
padding: 8px;
}
.h-6per {
height: 6%;
}
.close {
float: right;
font-weight: bold;
height: 1.875rem;
width: 1.875rem;
margin: 6px 6px 0px 0px;
}
.h-90cent {
height: 80%;
margin-top: 36px;
}
.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: 95%;
height: 16%;
font-size: 1rem;
color: $white;
background: $green;
margin-top: 24px;
}
Legend
Html element with directive