docs(modal): add open programatically

Author: MGREMY

apps/docs/docs/components/modal/_open-programatically.component.html

@@ -0,0 +1,43 @@
+<button
+  flowbiteButton
+  (click)="onClick()">
+  Trigger modal
+</button>
+
+<ng-template
+  #dialog
+  let-close="close">
+  <div flowbiteModalOverlay>
+    <div flowbiteModal>
+      <h3 flowbiteModalHeader>Terms of Service</h3>
+      <div flowbiteModalContent>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          With less than a month to go before the European Union enacts new consumer privacy laws
+          for its citizens, companies around the world are updating their terms of service
+          agreements to comply.
+        </p>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
+          25 and is meant to ensure a common set of data rights in the European Union. It requires
+          organizations to notify users as soon as possible of high-risk data breaches that could
+          personally affect them.
+        </p>
+      </div>
+      <div flowbiteModalFooter>
+        <button
+          flowbiteButton
+          (click)="close()"
+          color="info">
+          I accept
+        </button>
+        <button
+          flowbiteButton
+          (click)="close()"
+          color="default"
+          outline>
+          Decline
+        </button>
+      </div>
+    </div>
+  </div>
+</ng-template>

apps/docs/docs/components/modal/_open-programatically.component.ts

@@ -0,0 +1,31 @@
+import { Button } from 'flowbite-angular/button';
+import {
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from 'flowbite-angular/modal';
+
+import { Component, inject, TemplateRef, viewChild } from '@angular/core';
+import { NgpDialogManager } from 'ng-primitives/dialog';
+
+@Component({
+  imports: [Button, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay],
+  templateUrl: './_open-programatically.component.html',
+  host: {
+    class: 'flex flex-wrap flex-row gap-3 p-6',
+  },
+})
+export class FlowbiteOpenprogramaticallyComponent {
+  public readonly ngpDialogManager = inject(NgpDialogManager);
+  public readonly modal = viewChild('dialog', { read: TemplateRef<unknown> });
+
+  onClick(): void {
+    const modal = this.modal();
+
+    if (modal !== undefined) {
+      this.ngpDialogManager.open(modal);
+    }
+  }
+}

apps/docs/docs/components/modal/index.md

@@ -13,3 +13,15 @@ keyword: ModalPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+## Open programatically
+
+{{ NgDocActions.demo('flowbiteOpenprogramaticallyComponent', {container: false}) }}
+
+```angular-html file="./_open-programatically.component.html" group="openProgramatically" name="html"
+
+```
+
+```angular-ts file="./_open-programatically.component.ts" group="openProgramatically" name="typescript"
+
+```

apps/docs/docs/components/modal/ng-doc.page.ts

@@ -1,5 +1,6 @@
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
+import { FlowbiteOpenprogramaticallyComponent } from './_open-programatically.component';
 
 import type { NgDocPage } from '@ng-doc/core';
 
@@ -12,6 +13,7 @@ const Modal: NgDocPage = {
   category: ComponentCategory,
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
+    flowbiteOpenprogramaticallyComponent: FlowbiteOpenprogramaticallyComponent,
   },
 };