Merge pull request #20682 from E-Aghbari/ngb-modaloptions

NgbModalOptions Examples

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