File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Outputs
|
eventEmit
|
Type : EventEmitter
|
|
|
|
isSubmit
|
Type : boolean
|
Default value : false
|
|
|
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-add-link-modal',
templateUrl: './add-link-modal.component.html',
styleUrls: ['./add-link-modal.component.scss'],
})
export class AddLinkModalComponent implements OnInit {
links:string;
isSubmit : boolean = false;
@Output() eventEmit = new EventEmitter();
constructor() { }
ngOnInit() {}
cancel(){
this.eventEmit.emit();
}
submit() {
if(this.links && !this.isSubmit){
this.isSubmit = true;
this.eventEmit.emit(this.links);
}
}
}
<div class="custom-popup">
<div class="pop-container">
<ion-icon name="close" (click)="cancel()" class="close-attach-popup"></ion-icon>
<div class="pop-msg">
<h5>
{{'FRMELEMNTS_MSG_COPY_PASTE_LINKS_BELOW' | translate}}
</h5>
<div class="text-area-container">
<ion-textarea rows="5" placeholder="{{'FRMELEMNTS_LBL_LINK_TEXTAREA_PLACEHOLDER' | translate}}" [(ngModel)]="links">
</ion-textarea>
</div>
</div>
<div class="action-btns">
<ion-button class="custom-btn-txt-transform-none" color="light" (click)="cancel()">
{{'CANCEL' | translate}}
</ion-button>
<ion-button class="custom-btn-txt-transform-none" color="primary" (click)="submit()">
{{'FRMELEMNTS_BTN_ADD_LINK' | translate}}
</ion-button>
</div>
</div>
</div>
@import "src/assets/styles/_variables.scss";
.custom-popup {
width: 100%;
height: 100%;
display: flex;
position: fixed;
z-index: 9999;
top: 0px;
background: #6663;
.pop-container {
margin: auto;
width: 90%;
box-shadow: 0px 1px 4px 1px $gray-300;
background:$white-color;
padding: 10px;
.close-attach-popup{
float: right;
font-size: 1.5rem;
}
.pop-msg {
h5{
color: var(--primary-color);
margin: 30px 45px;
}
.text-area-container{
margin: 15px 15px;
border: 1px solid $gray-400;
padding: 10px;
border-radius: 16px;
}
}
.action-btns{
display: flex;
justify-content: space-between;
margin: 15px 15px;
}
}
}
Legend
Html element with directive