diff --git a/docs/en/framework/ui/angular/modal.md b/docs/en/framework/ui/angular/modal.md index 977ba1903b..e128b21e8c 100644 --- a/docs/en/framework/ui/angular/modal.md +++ b/docs/en/framework/ui/angular/modal.md @@ -195,6 +195,58 @@ 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. +Example of options: + - `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 }); + } +} + + ``` + +       If `animation: false` : + +![Modal example result](./images/animation-false.gif) + + +       Otherwise, `animation: true` : + +![Modal example result](./images/animation-true.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