Angular 2 modal using bootstrap

Only requires Bootstrap css. No need of Bootstrap javascript

How to use this:

• Clone or download the git repository from here.
• Add the directory components/modal into your angular 2 app.
• Use it as <modal></modal> or <alert></alert> in the view of the desired component.

Examples:

Below is a small demo that provide three different types of modal:

Alert Modal:

alert.open(): Opens an alert modal with header, body and footer. The title and message to be shown are set in alertTitle and message property respectively. Alert footer contains cancelButton with text ‘Ok, Got it.’ which closes alert modal and another(okButton) is hidden as it is set to false.

Confirm Modal:

alert.open(): opens a confirm modal. It shows the title and message that is set in alertTitle and message property respectively. Confirm footer contains two buttons, one is okButton which will emit modalOutput and is handled in confirmClose() method, the other is cancelButton which will close the confirm modal.

Dynamic Modal:

modal.open(Login): opens an modal with header and body. The modal’s footer is hidden as it’s value is false.The title and message to be shown are set in modalTitle and message property respectively. Open method optionally takes a component that is loaded dynamically in modal’s body. In this example, Login component is loaded dynamically inside modal body.If you want to emit some value you can call close(data) method and pass the value(optional).