Web SDK documentation
  1. Components
  2. ModalComponent

File

core/modal/modal.component.ts

Description

C8y modal component.

Example:

Creating custom modal:

 *  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:

 * 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

close

Type : function

customFooter

Type : boolean

Default value : false

disabled

Default value : false

dismiss

Type : function

labels
title

Type : string

Outputs

onClose $event Type: EventEmitter<boolean>
onDismiss $event Type: EventEmitter<boolean>

HostListeners

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

Methods

_close
_close()
Returns : void
_dismiss
_dismiss()
Returns : void

Accessors

labels
getlabels()
setlabels(undefined)
Parameters :
Name Optional
No
Returns : void 
<div class="modal-header">
  <ng-content select="[c8y-modal-title]"></ng-content>
  <h3 [hidden]="!title">
    {{ title | translate }}
  </h3>
</div>
<div class="modal-body">
  <p [hidden]="!title" class="text-center text-break-word">
    {{ body }}
  </p>
  <ng-content></ng-content>
</div>
<div
  class="modal-footer"
  *ngIf="!customFooter">
  <ng-content select="[c8y-modal-footer]"></ng-content>
  <button
    title="{{ labels.cancel | translate }}"
    *ngIf="labels.cancel"
    class="btn btn-default"
    (click)="_dismiss()"
  >
    {{ labels.cancel | translate }}
  </button>
  <button
    title="{{ labels.ok | translate }}"
    *ngIf="labels.ok"
    class="btn btn-primary"
    (click)="_close()"
    [disabled]="disabled"
  >
    {{ labels.ok | translate }}
  </button>
</div>

result-matching ""

    No results matching ""