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
Type : boolean
Default value : false
dismiss
Type : function
headerClasses
Type : string
Default value : ''
labels
title
Type : string

Outputs

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

HostListeners

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

Methods

_close
_close()
Returns : void
_dismiss
_dismiss()
Returns : void
onEnterKeyDown
onEnterKeyDown(_event: KeyboardEvent)
Decorators :
@HostListener('document:keydown.enter', ['$event'])
Parameters :
Name Type Optional
_event KeyboardEvent No
Returns : void

Accessors

labels
getlabels()
setlabels(undefined: ModalLabels)
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>
    <h3 [hidden]="!title">
      {{ title | translate }}
    </h3>
  </div>
  <div class="modal-inner-scroll">
    <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>
  <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>
</div>

results matching ""

    No results matching ""