Platform: Modal Technical Design
The modal is used as a container to be displayed in response to an action. It is commonly used to collect simple information with a short form, to get confirmation or display contextual information that does not require a page. The modal interrupts a current app process to prompt the user for information or to complete a short-term task. It’s a secondary window above the app, allowing the user to stay within the context of the current process. It requires users to make a decision or complete an action before they can continue.
<fdp-modal [resizeable]="true" [backdrop]="true" [closeOnescape]="true">
<fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
<fdp-modal-body>
<ng-template>
<span>Modal Content Goes here.......</span>
</ng-template>
</fdp-modal-body>
<fdp-modal-footer [showseparator]="true" [actions]="actions" (onModalAction)="onModalaction($event)"></fdp-modal-footer>
</fdp-modal>The 'resizeable' property allows to set the resize modal.
The 'backdrop' property allows to set the backdrop option for the modal.
The 'closeOnescape' used to option to close the modal on pressing of escape key.
The 'title' property allows the user to set the Modal title.
The 'icon' property allows the user to configure any icons in the modal header.
The 'closeable' property allows the user to set is modal can be close?
showseparator allows the user to set separator line between the modal body and nodal footer,
actions allows to configure set of actions can taken on modal.
On clicking of close icon on modal header , Modal should close.
export interface ActionItem {
label: string, // specifies the action label
type: string, // action button type
priority: number,// priority of the action
options: 'string' // option for the action button
}Link to general support for i18n: Supporting internationalization in ngx/platform
Since Modal is replaced by Dialog, this section will talk about Dialog support for core.
Special Usecase: No
-
fd-dialog-headercan be supported as:
<fd-dialog-header>
<h1 i18n="@@headerTitle" fd-dialog-title>The History of Pineapple</h1>
<button fd-dialog-close-button (click)="dialog.dismiss('Close button')"></button>
</fd-dialog-header>-
fd-dialog-bodycan be supported as:
<fd-dialog-body i18n="@@body">
Are you interested in The Great History of Pineapple?
</fd-dialog-body>-
fd-dialog-footercan be supported as:
<fd-dialog-footer>
<fd-dialog-footer-button>
<button fd-button
i18n="@@footerBtn"
fdType="emphasized"
fd-dialog-decisive-button
[compact]="true"
(click)="dialog.close('Continue')">
Interested
</button>
</fd-dialog-footer-button>
</fd-dialog-footer>Redesign Required: No
Kevin:
- I would not use
actions. My preference is to use "content projection" to add button actions to the footer. It's more flexible and it's easier to apply localization:
<fdp-modal>
<fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
<fdp-modal-body>
<ng-template>
<span>Modal Content Goes here.......</span>
</ng-template>
</fdp-modal-body>
<fdp-modal-footer [showseparator]="true">
<button (click)="onCancel()" i18n="Cancel button text">Cancel</button>
<button (click)="onSubmit()" i18n="Submit button text">Submit</button>
</fdp-modal-footer>
</fdp-modal>- Consider adding external
openandclosemethods to the modal component, so that application controller can open the model from some other application event.
@ViewChild('myModal') myModal: ModalComponent; // application creates reference to modal component
...
...
// somewhere in application controller code ...
startUpdateOfUserData() {
this.myModal.open();
}
endUpdateOfUserData(data: any) {
this.updateUserService.update(data).subscribe(res => {
// do some stuff
...
// then close the modal
this.myModal.close();
});
}Frank:
-
What is the added value compared core modal?
-
How would you use it in the application using Service?
-
In core, their
Serviceas far I can see accepts TemplateRef and you need to provide the configuration in the TS file which in most of the cases like i18n is not good. I18n works only in the template. Our solution is better. -
But instead of defining
Modalin the component template Let;s think about how to createModalusing component that you can pass around. If I want to define Modal that I want to use across whole application how I am going to do this ? -
Defining component fdp-modal in the template of the component does not scale well.
-
You still want to use a Service this is convinient way for the application. You just Inject a Service and call show, but you want to be able to pass Directly the Component here. not like core template.
-
e.g. When the Modal will have some inputs how are you going to subcribe/listen for results ?
modalService: ModalService
modelService.open(FeedbackFormComponent, {...options})
Maybe you want some service that on open returns Observable you can subscribe to and once its closed you can read result.
Try to see it yourself as application developer. Define dialog inside your existing template forcing you to add extra View query to get hold of dialog, Create two extra methods to be able to open it and close ? Its too much code.
I woudl like to see something like this:
modalService: ModalService
let mydialog = modelService.open(FeedbackFormComponent, {...options})
myDialog.onClose().subscription (result -> {save inputs})
With this I can achive more with less code for the application developer. It does not mean it cannot read your Modal defined in the template if you try to do something local.
Check these example to have some inspiration: https://www.primefaces.org/primeng/#/dynamicdialog https://material.angular.io/components/dialog/overview