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">