Migrating Modals from Semantic UI to Bootstrap

In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap.

Template-based modals

Migrating templates

SUI templates follow this structure:

  <ng-template  #templateBasedModal let-context let-modal="modal">
    <div class="header"> ... </div>
    <div class="content"> ... </div>
    <div class="actions">
      <button id="..." class="..."
              (click)="modal.approve( ... )" ... </button>
      <button id="..." class="..." 
              (click)="modal.deny(  ... )"> ... </button>
    </div>
  </ng-template>

Bootstrap templates follow this structure instead:

<ng-template #templateBasedModal let-modal>
    <div class="modal-header">
        <div class="modal-title"> ... </div>
        <button class="btn close" type="button" (click)="modal.dismiss( ... )">
            &times;
        </button>
    </div>

    <div class="modal-body">
        ...
    </div>

    <div class="modal-footer">
        <button type="button" class="..." (click)="modal.close( ... )"> ... </button>
    </div>
</ng-template>

Notes

• The context provided by SUI (let-context) is not available with Bootstrap; any parameters must be passed referencing component fields in the template. (See Migrating components below.)`

• SUI modal methods approve() and deny() are called close() and dismiss() in Bootstrap, respectively.

• Bootstrap modal templates use a close (✗) button in the top-right corner for closing. Unless the modal's semantics require that, no extra close button should be added.

• By default, Bootstrap modals can be dismissed by hitting the ESC key or clicking on the modal's background.

• SUI classes header, content and actions map to Bootstrap's modal-header (with modal-title) , modal-body and modal-footer.

• Setting style="width: 700px !important;" or similar in an ng-template definition works for SUI, not for Bootstrap. Use one of the options of the open() method instead, like
  this.modalService.open(content, { size: 'lg' });
  See Modal with options for more info.

Migrating components

You use SUI template modals as follows:

export interface IMContext {
    data: string;
}

@ViewChild('modalTemplate', { static: false })
templateBasedModal: ModalTemplate<IMContext, string, string>
    ...

constructor( private modalService: SuiModalService, ... ) {
    ...
}

    ...

const config = new TemplateModalConfig<IMContext, string, string>(this.templateBasedModal);
config.closeResult = '...';
config.context = { data: ... };
    ...

this.modalService.open( config )
    .onApprove( result => { ... })
    .onDeny(    result => { ... });

where IMcontext is an interface describing the contex object that will be passed to the template. (Obviously, it doesn't need to be IMcontext, any name will do.)

You use Bootstrap templates as follows:

@ViewChild('templateBasedModal', { static: false })
templateBasedModal: TemplateRef<any>;
    ...

constructor( private modalService: NgbModal, ... ) {
    ...        
}

    ...

this.modalService.open( this.templateBasedModal ).result
    .then(  accept => { ... })
    .catch( reason => { ... });

Notes

• Since Bootstrap has no equivalent of the SUI's context, the API is simpler.

• With Bootstrap, open( ... ).result returns a Promise. The accept arg value The reason arg value will be whatever was passed to the modal.close() method (in the template). one of the constants of the ModalDismissReasons enumeration or whatever was passed to the modal.dismiss() method (also in the template). When catch is not otherwise needed, .catch(_ => {}) should be called to avoid an error message that clutters up the console when the modal is dismissed.

Component-based modals

TO-DO