Angular

[fifiuro]

Consulta se puede implementar el Menú Editor en Angular

[davicotico]

Sí, funciona correctamente. Puedes seguir los siguientes pasos:

1. Primero instalas en tu proyecto la biblioteca desde NPM

   npm install @davicotico/menu-editor

2. Se debe incluir un elemento div en el template html del componente en el cual se mostrará el editor de menú.

   <div id="myEditor"></div>

3. Importar la clase MenuEditor en el archivo typescript del componente

import { MenuEditor } from '@davicotico/menu-editor';

4. Al inicializar el componente (en el evento/hook OnInit ) tiene que crearse una instancia de la clase MenuEditor y a partir de ahí setear los datos y eventos que correspondan para finalmente ejecutar el método mount().

   export class AppComponent implements OnInit {
   
   menu!: MenuEditor;
   
   constructor() {
   
   }
   
   ngOnInit(): void {
   this.menu = new MenuEditor('myEditor');
   const datos =  [
     {
     "text": "Home",
     "href": "/home",
     "tooltip": "Go to home page",
     "icon": "fa-solid fa-house",
     "children": []
     },
     {
     "text": "About Us",
     "href": "/about",
     "tooltip": "Learn more about our company",
     "icon": "fa-solid fa-address-card",
     "children": []
     },
     {
     "text": "Services",
     "href": "/services",
     "tooltip": "Discover the services we offer",
     "icon": "fa-solid fa-gear",
     "children": [
       {
       "text": "Service 1",
       "href": "/services/1",
       "tooltip": "Details for Service 1",
       "icon": "cog",
       "children": []
       },
       {
       "text": "Service 2",
       "href": "/services/2",
       "tooltip": "Details for Service 2",
       "icon": "cog",
       "children": []
       }
     ]
     }
   ];
   this.menu.setArray(datos);
   this.menu.mount();
   }
   }

5. Es importante incluir el archivo de estilos styles.min.css, sin embargo, acabo de ver que existe un bug en el paquete NPM y por eso (por ahora) tendrás que copiar el archivo desde el repositorio (está en dist/styles.min.css) y llevarlo a tu proyecto (puede ser a src/assets). En tu archivo src/index.html puedes incluirlo de esta forma:

<link href="./assets/styles.min.css" rel="stylesheet">