How to add a cancel icon at top right of window?

[navcoder]

Hi, I am using default alert, confirm() modal window. However I would like to add a close (X) icon at top right of modal window. Is there any way by which I can add such functionality without having to create my own custom modal window? I can obviously place the "X" icon using the header class but how to make sure that the dialog is closed when user clicks this "x" icon?

[shlomiassaf]

You can set the title Html

[navcoder]

Yes I have tried that and I can place the icon with that, but how do i attach close method to click of the icon? I tried (click)="close()", but it didn't work.

[shlomiassaf]

the component has a dialog property which is a ModalDialogInstance

It has a dismiss() function, attach it.

[shlomiassaf]

take a look at the ModalFooter code, the cancel button does the same thing...

[navcoder]

Can you send the HTML for a simple button you are suggesting? I have tried it on your "http://shlomiassaf.github.io/angular2-modal#/customizeModals", but it doesn't work. :( Also below is your modalFooter code, where there is no cancel. I am using version "0.1.3" :- import { Component, Input, Output, EventEmitter } from 'angular2/core'; import {ModalButtonConfig} from '../modals/MessageModal';

export interface FooterButtonClickEvent { btn: ModalButtonConfig; $event: MouseEvent; }

/**

• Represents the modal footer for storing buttons. / @Component({ selector: 'modal-footer', template: <div [ngClass]="footerClass"> <button *ngFor="#btn of buttons;" [ngClass]="btn.cssClass" (click)="onClick(btn, $event)">{{btn.caption}}</button> </div> }) export class ModalFooter { /*

  • Class name used for the footer container. */ @Input() public footerClass: string;

  /**

  • A collection of button configurations, each configuration is a button to display. */ @Input() public buttons: ModalButtonConfig[];

  /**

  • Emitted when a button was clicked
  • @type {EventEmitter} */ @Output() public onButtonClick = new EventEmitter();

  constructor() {}

  onClick(btn: any, $event: MouseEvent) { this.onButtonClick.emit({btn, $event}); } }

/\ WEBPACK FOOTER \ ./~/tslint-loader!./src/components/angular2-modal/components/modalFooter.ts /

[shlomiassaf]

Hi,

Sorry, my last suggestion will not work.

You need to provide you're own version to MessageModal, this will mean that all of the presets (alert, config, propmt) will have to change/override as well, a lot work.

Wait for the next version, I will allow more flexibility there.

[shlomiassaf]

Version 1.0.0 solves this, you can add a close button.

For custom icons a custom implementation of a plugin is needed, this is a desired behaviour. The public plugins (bootstrap, vex) are for general usage, for specific usage a custom implementation is the way to go.