@smartbit4all/dialog
v1.0.8
Published
## References
Downloads
27
Keywords
Readme
Smart Dialog
References
These packages must be updated in case of a new version:
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.