wg-dialog v1.0.8
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
inapp.component.html
```typescript <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