Angular2 Simple Modal Dialog Windows with bootstrap

Angular2 Simple Modal Dialog Windows with bootstrap

Angular2 Simple Modal Dialog Windows – In this post we will give you code and demo for Angular2 Simple Modal Dialog Windows with bootstrap. Hear we give you code and demo of Date Range Picker using Simple Modal Dialog Windows. It will help you to understand this code.

Simple modal Dialog is a fast, light-weight and reusable Angular 2.3.0 compatible solution that will create a Simple Modal Dialog Windows, add it to the DOM, and so take away the modal from the DOM once it’s fired. The modal returns a promise indicating that button was ironed to dismiss the modal that then optionally are often used for additional process.

Angular2 Simple Modal Dialog Windows with bootstrap

The BaseModal has a default, generic modal style provided that can be extended to display modals with other style sheets, such as Bootstrap.

The Angular2 Simple Modal Dialog Windows is combine with text input. Angularjs Date Range Picker will use the current value of the input to initialize, and update the input if new dates are chosen.

ussage/code example

• install using npm packages = npm install md-date-range-picker
• install using bower = bower install md-date-range-picker

Demo for Angular Material Date Range

View DemoGit Code

How to use Modal Dialog Windows

Import the ModalModule.forRoot() in your app’s bade module.

Angular2 Simple Modal Dialog Windows example:

// import module
import { ModalModule } from './modal/modal.module';
// imports NgModule
@NgModule({
    imports: [ ModalModule.forRoot() ],
    ...
})
// add class AppModule 
export class AppModule {}

See this app/app.module.ts for example.

Three parts comprise the simple-modal: a BaseModalConfig, a modal component, and the Simple Modal provider.

The Base Modal Config contains the settings for the modal and is injected once the modal is formed by vocation show(config:BaseModalConfig, modal:Type) on the Simple Modal supplier. The modal loaded will either be the default BaseModal element or a element extending it. See the Bootstrap Modal element for Associate in Nursing example.

The following parameters area unit settable on the BaseModalConfig:

• title – HTML or text for the modal title
• message – HTML or text for the modal body
• type – ( critical, warning, info, or default )
• blocking – whether or not or not the modal will be unemployed by clicking the overlay
• confirmBtn – label of the nonobligatory make sure button. The confirm Button(confirmButton ) is related to the confirm() operate, which can optionally take a string to come back via the modal’s promise if clicked . If no string is given for the confirm() function’s parameter, then the confirm Btn(confirmtn) label are going to be came back.
• cancelBtn – label of the cancel button, that is nonobligatory if not block. The cancel Button(cancelButton ) is related to the cancel() operate, which can optionally take a string to come back via the modal’s promise if clicked ( for example: click('bar') ). If no string is given for the cancel() function’s parameter, then the cancel Btn(cancelBtn ) label are going to be came back.
• width/height – (size) For the Bootstrap demo, the [ngClass] attribute on <div class="modal-dialog"> component uses the breadth to regulate the dimensions according.

Getting started for Angular2 Simple Modal Dialog

• Clone to repo
• Install dependencies : npm install
• Run this TypeScript transpiler and start server : npm start