Web SDK documentation
  1. Components
  2. ModalComponent

File

core/modal/modal.component.ts

Description

C8Y component for creating modals.

Creating custom modal:

Example :
 import { Component } from "@angular/core";
 import { Subject } from 'rxjs';

@Component({
 selector: "my-modal",
 template: `
   <c8y-modal title="CustomTitle"
     (onClose)="onClose($event)"
     (onDismiss)="onDismiss($event)"
     [labels]="labels"
     [disabled]="true" <- will disable ok button
     >
       <span>I am body of modal</span>
       <span>For simple string use body="string"</span>
   </c8y-modal>`
})

export class MyModalComponent {

 closeSubject: Subject<boolean> = new Subject();
 labels : ModalLabels = {ok: "customOK", cancel: "customCancel"};

 onDismiss(event){
   this.closeSubject.next(false);
 }

 onClose(event) {
   this.closeSubject.next(true);
 }
}

Showing modal:

Example :
import { BsModalService } from "ngx-bootstrap/modal";

constructor(
 public bsModalService: BsModalService,
) {}

showModal() {
 const modalRef = this.bsModalService.show(MyModalComponent);
 modalRef.content.closeSubject.subscribe(result => {
   console.log('results:', result);
 });
}

Metadata

selector c8y-modal
templateUrl ./modal.component.html

Index

Methods
Inputs
Outputs
HostListeners
Accessors

Constructor

constructor(modal: BsModalRef)
Parameters :
Name Type Optional
modal BsModalRef No

Inputs

body
Type : string

Modal body.
close
Type : function

Callback function which is called right after 'ok' button is clicked, before 'onClose' emits.
customFooter
Type : boolean
Default value : false

Indicates if modal should use custom footer provided with content projection (or no footer at all). If false, default footer with 'cancel' and 'ok' buttons will be displayed.
disabled
Type : boolean
Default value : false

Indicates if the 'ok' (confirmation) button is disabled.
dismiss
Type : function

Callback function which is called right after 'cancel' button is clicked, before 'onDismiss' emits.
headerClasses
Type : string
Default value : ''

CSS classes for modal header.
labels
Type : ModalLabels

Custom labels for 'cancel' and 'ok' buttons.
title
Type : string

Title of modal.

Outputs

onClose
Type : EventEmitter<boolean>

Emits 'true' when 'ok' button is clicked.
onDismiss
Type : EventEmitter<boolean>

Emits 'true' when 'cancel' button is clicked.

HostListeners

document:keydown.enter
Arguments : '$event'
document:keydown.enter(_event: KeyboardEvent)

'Enter' keyboard button handler. Calls '_dismiss' or '_close' method when only one corresponding button exists.

Parameters :
Name Optional Description
_event No

Enter keydown event

Methods

_close
_close()

Hides modal or calls 'close' input callback, then emits 'onClose' output. Method is called when 'ok' button is clicked, but can be also triggered by accessing 'ModalComponent' instance.

Returns : void
_dismiss
_dismiss()

Hides modal or calls 'dismiss' input callback, then emits 'onDismiss' output. Method is called when 'cancel' button is clicked, but can be also triggered by accessing 'ModalComponent' instance.

Returns : void
onEnterKeyDown
onEnterKeyDown(_event: KeyboardEvent)
Decorators :
@HostListener('document:keydown.enter', ['$event'])

'Enter' keyboard button handler. Calls '_dismiss' or '_close' method when only one corresponding button exists.

Parameters :
Name Type Optional Description
_event KeyboardEvent No

Enter keydown event
Returns : void

Accessors

labels
getlabels()
setlabels(undefined: ModalLabels)

Custom labels for 'cancel' and 'ok' buttons.

Parameters :
Name Type Optional
ModalLabels No
Returns : void 
<div class="viewport-modal">
  <div class="modal-header {{ headerClasses }}" [ngClass]="{ separator: title }">
    <ng-content select="[c8y-modal-title]"></ng-content>
    <div [hidden]="!title" id="modal-title" class="modal-title">
      {{ title | translate }}
    </div>
  </div>
  <div class="modal-inner-scroll" id="modal-body">
    <div [ngClass]="{ 'modal-body': !customFooter, 'd-contents': customFooter }">
      <p *ngIf="title" class="text-center text-break-word">
        {{ body }}
      </p>
      <ng-content></ng-content>
    </div>
  </div>
  <ng-content select="[c8y-modal-footer-custom]"></ng-content>
  <div class="modal-footer" *ngIf="!customFooter">
    <ng-content select="[c8y-modal-footer]"></ng-content>
    <button
      type="button"
      title="{{ labels.cancel | translate }}"
      *ngIf="labels.cancel"
      class="btn btn-default"
      (click)="_dismiss()"
    >
      {{ labels.cancel | translate }}
    </button>
    <button
      type="button"
      title="{{ labels.ok | translate }}"
      *ngIf="labels.ok"
      class="btn btn-primary"
      (click)="_close()"
      [disabled]="disabled"
    >
      {{ labels.ok | translate }}
    </button>
  </div>
</div>

results matching ""

    No results matching ""