diff --git a/docs/en/framework/ui/angular/images/animation-false.gif b/docs/en/framework/ui/angular/images/animation-false.gif new file mode 100644 index 0000000000..e6113eccba Binary files /dev/null and b/docs/en/framework/ui/angular/images/animation-false.gif differ diff --git a/docs/en/framework/ui/angular/images/animation-true.gif b/docs/en/framework/ui/angular/images/animation-true.gif new file mode 100644 index 0000000000..62bdb3f024 Binary files /dev/null and b/docs/en/framework/ui/angular/images/animation-true.gif differ diff --git a/docs/en/framework/ui/angular/images/fullscreen-true.png b/docs/en/framework/ui/angular/images/fullscreen-true.png new file mode 100644 index 0000000000..841946176a Binary files /dev/null and b/docs/en/framework/ui/angular/images/fullscreen-true.png differ diff --git a/docs/en/framework/ui/angular/modal.md b/docs/en/framework/ui/angular/modal.md index 977ba1903b..2b8412202c 100644 --- a/docs/en/framework/ui/angular/modal.md +++ b/docs/en/framework/ui/angular/modal.md @@ -195,6 +195,59 @@ The modal with form looks like this: **`options`** is an input typed [NgbModalOptions](https://ng-bootstrap.github.io/#/components/modal/api#NgbModalOptions). It is configuration for the `ng-bootstrap` modal. + +**Examples:** + +- `animation`: This is an NgbModalOption property of type *boolean*. It controls whether the modal opens and closes with an animation. By default, it is set to true, meaning that the modal will have a smooth transition when it opens and closes. Setting it to false will disable these animations. + +```js +import { Component } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'ngbd-modal-options', + ...}) + +export class NgbdModalOptions { + modalService = inject(NgbModal); + animationModal(content) { + this.modalService.open(content, { animation: true }); + } +} +``` + +       The result of this configuration would be like this: + +![Modal example result](./images/animation-true.gif) + +       On the contrary, if we set it as false: + +![Modal example result](./images/animation-false.gif) + + +- `fullscreen`: This is an NgbModalOption property of type *boolean or string*. When set to `true`, the element will expand to cover the entire screen, hiding all other interface elements. When set to `false`, the element remains in its regular size and position within the page. + +```js +import { Component } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'ngbd-modal-options', + ...}) + +export class NgbdModalOptions { + modalService = inject(NgbModal); + fullscreenModal(content) { + this.modalService.open(content, { fullscreen: true }); + } +} + +``` + +       If `fullscreen: true`: + +![Modal example result](./images/fullscreen-true.png) + #### suppressUnsavedChangesWarning ```js