Dua UI

Dua UI is a UI library for Angular. It is a collection of components, directives, and pipes that are commonly used in web applications.

Installation

To install this library, run:

npm install dua-ui --save

Consuming your library

You can import your library in any Angular application by running:

npm install dua-ui

and then from your Angular AppModule or SharedModule:

import { DuaUIModule } from "dua-ui";

@NgModule({
  imports: [DuaUIModule],
})
export class AppModule {}

Components

Dialog Component

The dialog component is a modal dialog that can be used to display information to the user. It can be used to display a form, a message, or any other content.

Properties - inputs

Name	Description
show?: boolean	Default value is true, show or hide the dialog => caveat: use the component parent node still appends in the dom => use ngIf
title?: string;	The title of the dialog, provide one to overide the default value
config?: top?: number;	Specifies the vertical position of the dialog
config?: position?: 'left'	'right'
config?: bottom?: number;	Specifies the vertical position of the dialog
config?: type?: `'confirm'	'alert';`
config?: confirmText?: string;	Specifies the confirm button cta text
config?: cancelText?: string;	Specifies the cancel button cta text
config?: showCloseButton?: boolean;	Show or hide the close button or icon
config?: showFooter?: boolean;	Show or hide the default footer, e.g when you do not want to provide one for the modal type dialog

Properties - outputs

Name	Description
closeDialog : EventEmitter<Event>;	Emits when the dialog is closed, use this to update the show input prop on the dialog
dialogConfirm : EventEmitter<Event>;	Emits when the confirm button cta is clicked
dialogCancel : EventEmitter<Event>;	Emits when the cancel button cta is clicked

Methods

Name	Description
handleClose : parameter, event : Event	Closes the dialog

Example : type = modal

<dua-dialog
  [show]="showDialog"
  title="Remove Tax Record"
  (closeDialog)="showDialog = false"
  (dialogConfirm)="handleConfirm()"
>
  <section dialog-body>
    <!--Some content -->
  </section>
  <section dialog-footer>
    <!--Some content -->
  </section>
</dua-dialog>

Example : type = confirm

<dua-dialog
  [show]="showDialog"
  title="Remove Tax Record"
  [config]="{
      confirmText: 'Yes, Proceed',
      cancelText: 'Cancel',
      type: 'confirm'
    }"
  (closeDialog)="showDialog = false"
  (dialogConfirm)="handleConfirm()"
>
  <section dialog-body>
    <!--Some content -->
  </section>
</dua-dialog>