npm package: @smartbit4all/dialog
Description: ## References
Latest version: 1.0.8

# Smart Dialog

## References

These packages must be updated in case of a new version:

-   [_@smartbit4all/view-context_](https://www.npmjs.com/package/@smartbit4all/view-context)

---

## How to use

### Installation

Go to your project, open the terminal and use the following command:

    npm i @smartbit4all/dialog

Then import it in the AppModule:

`app.module.ts:`

    import { SmartdialogModule, SmartdialogService } from '@smartbit4all/dialog';
    ...
    @NgModule({
        declarations: [...]
        imports: [
            ...
            SmartdialogModule,
        ],
        providers: [
            ...
    	    SmartdialogService,
        ]
        ...
    })

### Usage #1

If you **do not** use the **`SmartViewContext`** package in your project **or the dialog is not opened by the BFF**, you **have to create a service** for you component.

Create a component for the content of the dialog. In the folder of the component create an Angular Service.

-   src/app/.../example-dialog/
    -   example-dialog.component.css
    -   example-dialog.component.html
    -   example-dialog.component.ts
    -   example-dialog.service.ts

Extend your service with the `SmartdialogService`. You can see an example for a specific service belove.

`example-dialog.service.ts:`

    @Injectable({
        providedIn: 'root'
    })
    export class ExampleDialogService extends SmartdialogService {
        constructor(
            dialog: MatDialog,
            router: Router
        ) {
            super(dialog, router);
        }

        override handleAfterClosed(result: any): void {
            ...
        }

        openDialog(): void {
            const dialogData: SmartDialogData = { ... };
            this.createDialog(dialogData, SmartDialog);
        }

        onAction(params: any): void {
            this.closeDialog().then(() => {
                ...
            });
        }
    }

In case if you use **RouterOutlet** in your dialog, it should be used like this:

`example-dialog.component.html:`

    <router-outlet name="exampleNamedOutlet"></router-outlet>

`app-routing.module.ts:`

    ...
    {
    	path: 'example-url',
    	component: ExampleComponent,
    	outlet: 'exampleNamedOutlet'
    }

`example-dialog.service.ts:`

    const dialogData: SmartDialogData = {
        ...
        outlets: {
            exampleNamedOutlet: null
        }
    };

### Usage #2

If you **use** the **`SmartViewContext`** package in your project **and the dialog is opened by the BFF**, you **do not** have to **create a service** for you component.

`view-context.pages.ts:`

    export enum Pages {
        VIEW_CONTEXT = 'viewContextUuid',
        EXAMPLE_DIALOG = 'exampleDialog'
    }

`view-context.handlers.ts:`

    export const viewContextHandlers: SmartViewHandlerModel[] = [
        {
            name: Pages.EXAMPLE_DIALOG,
            component: ExmapleDialogComponent
        }
    ];

---

## Version logs

## @smartbit4all/form v1.0.5

**Type: Update**

The **openComponentAsDialog** function returns the reference of the created dialog.

    openComponentAsDialog(component: ComponentType<any>, viewName: string): MatDialogRef<any, any> { ... }

## @smartbit4all/form v1.0.4

**Type: Update**

`@smartbit4all/icon` support.

## @smartbit4all/form v1.0.1

**Type: Update**

The package has been published.

## @smartbit4all/dialog v0.1.0

**Type: Feature**

From this version the usage of `SmartViewContext` is supported.

The **SmartDialogService got a new function** which **creates** a unified **SmartDialogData object** and **opens the dialog**.

    export class SmartdialogService {

        ...

        openComponentAsDialog(component: ComponentType<any>, viewName: string): void {
            let smartDialog: SmartDialogData = {
                size: {},
                content: {
                    title: viewName,
                },
                customComponent: component,
            };

            this.createDialog(smartDialog, component);
        }
    }

## @smartbit4all/dialog v0.0.7

**Type: Feature**

In this update a new way to handle dialogs and its data has been introduced.

With the `SmartdialogService` **creating** and **closing** a dialog has become easier and more unified. **This service should be used as a parent class of a workflow specific service.**

## @smartbit4all/dialog v0.0.2

**Type: Version updates**

The versions of the SmartForm and the SmartTable have been updated.

**New versions:**

-   @smartbit4all/form: v0.1.1
-   @smartbit4all/table: v0.1.3

## @smartbit4all/dialog v0.0.1

**Type: Feature**

The basic smart dialog with its features.