wg-dialog

WgDialog

WgDialog is an angular component library, based on wg-angular-library project. This component shows a popup dialog with header, body, footer that is passed in as inputs and emits events to close the dialog.

Notes

It was generated by angular-cli with ng new wg-dialog command.

This library has demo app, that can be used for documentation or sandbox purposes, and expose only component directory, which has the code for the library.

Run npm install to download the dependencies.

Run npm start to run it and test the app locally.

go to http://localhost:4200 in your browser.

Package.json

Before running npm install update your package.json to add libraries (Primeng, bootstrap, d3 etc).

Usage

• create new [angular-cli] project: ng new test-wg-dialog or use it within your existing repo.
• install library: npm install --save wg-dialog
• add module import declaration in app.module.ts:

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   import { WgDialogModule } from 'wg-dialog/wg-dialog';

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       WgDialogModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })

• use wg-dialog in app.component.html

   <h2>Test Dialog Component</h2>
   <button class="btn" type="button"
        id="showDialog"
        (click)="showDialog()">Show Dialog
   </button>
  
   <wg-dialog 
  [showDialog]="dialogVisible"
  (dialogClosedEvent)="dialogCloseFired()">
  <div dialog-title>Sample Dialog</div>
  <div dialog-content>
    <p>Sample Dialog body</p>
  </div>
   </wg-dialog>

 * run project: `npm start`


For a more in depth explanation of the component, please see the [Wiki](https://github.infra.int.daas-watchguard.com/Team-DaaShers/wg-dialog/wiki)