File
Metadata
| selector |
cd-modal |
| styleUrls |
./modal.component.scss |
| templateUrl |
./modal.component.html |
|
modalRef
|
Type : BsModalRef
|
|
|
Outputs
|
hide
|
Type : EventEmitter
|
|
|
Should be a function that is triggered when the modal is hidden.
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'cd-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
@Input()
modalRef: BsModalRef;
/**
* Should be a function that is triggered when the modal is hidden.
*/
@Output()
hide = new EventEmitter();
constructor() {}
close() {
if (this.modalRef) {
this.modalRef.hide();
}
this.hide.emit();
}
}
<div class="modal-header">
<h4 class="modal-title pull-left">
<ng-content select=".modal-title"></ng-content>
</h4>
<button type="button"
class="close pull-right"
aria-label="Close"
(click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<ng-content select=".modal-content"></ng-content>
@import '../../../../defaults';
.modal-header {
@include hf;
border-radius: 5px 5px 0 0;
}
::ng-deep .modal-footer {
@include hf;
border-radius: 0 0 5px 5px;
}
::ng-deep .modal-body {
max-height: 70vh;
overflow-y: auto;
overflow-x: hidden;
}
Legend
Html element with directive