Circe :: Angular Modal Component
Modal layer for use through <ng-content> tag.
Compatibility
Angular v.7.2.15
Installation
Run npm install @lunaeme/circe-modal or
runyarn add @lunaeme/circe-modal.
Use
You need to import ModalModule into your module imports section.
Then use this way:
<cc-modal [title]="'My Content'">
Your content here
</cc-modal>Inputs
@Input() title: string;
Set title on top bar.
@Input() titleClass: string;
If you need to apply any css class on title.
@Input() titleBackground: boolean;
If you want to set background color (gray) on title bar.
@Input() closeButton: boolean;
If you want to have close icon button on title bar.
@Input() modalBackground: boolean;
If you want to set transparency layer around modal window.
@Input() clickOutside: boolean = false;
If you want modal window closes by clicking outside.
DEFAULT: false
@Input() clickOutsideExceptions: Array<string> = [];
Array of DOM id's over which the modal window will not close.
DEFAULT: []
@Input() fixed: string;
String that set the size of modal window. If it is not set, the window will automatically take the size of the content.
This will take the following values:
<!-- Set modal to 250px width and 250px height: -->
<cc-modal [title]="'My Content'" [fixed]="'250px'">
Your content here
</cc-modal>
<!-- Set modal to 50% width and 50% height: -->
<cc-modal [title]="'My Content'" [fixed]="'50%'">
Your content here
</cc-modal>
<!-- Set modal to 400px width and 250px height: -->
<cc-modal [title]="'My Content'" [fixed]="'250px 400px'">
Your content here
</cc-modal>
<!-- Set modal to 70% width and 40% height: -->
<cc-modal [title]="'My Content'" [fixed]="'40% 70%'">
Your content here
</cc-modal>Outputs
@Output() close: EventEmitter<boolean> = new EventEmitter();
Event that triggers the closing of the modal window.