Dialog Component Guide

The @ngx-adv/dialog is a powerful tool for Angular that allows you to easily create and manage dialogs in your web applications. It provides a seamless way to display(Text, TemplateRef, Component) with various customization options.

Table of Contents

• Features
• Installation
• Usage
• Contributions

Features

• Display Text: Allow the dialog to display simple text messages.

• TemplateRef: Support the use of Angular TemplateRef to render custom content within the dialog.

• Components: Support rendering Angular components within the dialog for more complex and interactive content.

• Header Component: Include a header component with the following features:

  • Title: Display a title for the dialog.
  • Close Button: Include a close button to allow users to close the dialog.

• Dialog Body: A container for the main content of the dialog. It should be flexible enough to accommodate text, TemplateRefs, or components.

• Dialog Footer: Include a footer section to place action buttons or additional content.

• Generic Types: Provide support for generic types to handle transferred data and response data. This allows users to specify the data structure they expect when opening and closing dialogs.

Installation

1. Install the @ngx-adv/badge package using npm:

npm install --save @ngx-adv/dialog

2. Import the Dialog component styles into your Angular application's stylesheet:

@import '@ngx-adv/theme/assets/scss/components/dialog';

Usage

3. In your component TypeScript file, import the necessary classes:

import { Component } from '@angular/core';
import { DialogService } from '@ngx-adv/dialog';
import { MyCustomDialogComponent } from './my-custom-dialog.component';

@Component({
  selector: 'app-my-component',
  template: ` <button (click)="openDialog()">Open Dialog</button> `,
})
export class MyComponent {
  constructor(private dialogService: DialogService) {}

  openDialog() {
    this.dialogService.open(
      MyCustomDialogComponent, // Your custom dialog component
      {
        width: '400px', // Customize the width
        data: {
          /* Any data you want to pass to the dialog component */
        },
      },
    );
  }
}

Contributions

Contributions for the @ngx-adv/dialog package are made by Mohamed Elserety. If you have any specific questions or need further assistance with this package, please reach out to your team for support.