Web SDK documentation
  1. Components
  2. ModalComponent
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);
 });
}

Example

Metadata

selector c8y-modal
standalone true
imports
NgIf
C8yTranslatePipe
templateUrl ./modal.component.html

Relationships

Used by

Depends on

<div class="viewport-modal">
  <div
    class="modal-header {{ headerClasses }}"
    [ngClass]="{ separator: title }"
  >
    <ng-content select="[c8y-modal-title]"></ng-content>

    @if (title) {
      <div
        class="modal-title"
        id="modal-title"
      >
        {{ title | translate }}
      </div>
    }
  </div>

  <div
    class="modal-inner-scroll"
    id="modal-body"
  >
    <div [ngClass]="{ 'modal-body': !customFooter, 'd-contents': customFooter }">
      @if (title) {
        <p class="text-center text-break-word">
          {{ body }}
        </p>
      }

      <ng-content></ng-content>
    </div>
  </div>

  <ng-content select="[c8y-modal-footer-custom]"></ng-content>

  @if (!customFooter) {
    <div class="modal-footer">
      <ng-content select="[c8y-modal-footer]"></ng-content>

      @if (labels.cancel) {
        <button
          class="btn btn-default"
          title="{{ labels.cancel | translate }}"
          type="button"
          data-cy="c8y-modal--dismiss"
          (click)="_dismiss()"
        >
          {{ labels.cancel | translate }}
        </button>
      }

      @if (labels.ok) {
        <button
          class="btn btn-primary"
          title="{{ labels.ok | translate }}"
          type="button"
          data-cy="c8y-modal--confirm"
          (click)="_close()"
          [disabled]="disabled"
        >
          {{ labels.ok | translate }}
        </button>
      }
    </div>
  }
</div>

results matching ""

    No results matching ""