Window-menu-gmr

Ventana de menu aplicable a cualquier etiqueta html con N niveles de ventanas para angular 7 en adelante

Installation

Esta version requiere de Node.js v4+ para correr.

Instale las dependencias e inicie el servidor.

$ cd <tuProyecto>
$ npm install window-menu-gmr
$ ng serve

Modelos e Interfaces

Los modelos son clases que contiene la libreria

export class WindowMenuModel {
  //Variable que contiene la lista de opciones para el menu
  private items: WindowItemModel[];

  //metodo que agrega una opcion nueva al menu con su funcion Clic
  addItemWithFunction
  (btnName: string, functionClick: (btnName?: string) => void)
  : WindowMenuModel;
  
  //metodo que agrega una opcion nueva al menu que al dar clic abrira otro nuevo menu
  addItemWithNewMenu(btnName: string): WindowMenuModel;

  //metodo que retorna la posicion de la ventana buscandolo por su nombre
  getItemMenuModelName(btnName: string): WindowMenuModel;

  //metodo que agrega una lista de WindowItemModel
  set setWindowItemsModel(items: WindowItemModel[]);

  //metodo que retorna toda la lista de WindowItemModel 
  get getWindowItemsModel();
}

interface WindowModel { windowMenuModel: WindowMenuModel; }

interface FunctionModel { function: (btnName?: string) => void; }

export interface WindowItemModel {
  btnName: string;
  clickEvent: FunctionModel | WindowModel;
}

Inputs y Outputs

A continuacion se describen los inputs y outputs de la librería

| Inputs | Descripción | | ------ | ------ | | @Input() windowMenuModel: WindowMenuModel | Es obligatorio mandar la lista de menus para que se puedan ver con el modelo WindowMenuModel |

| Outputs | Descripción | | ------ | ------ | | n/a | ... |

Como usar

Import => import { WindowMenuGmrModule } from 'window-menu-gmr';

Implementar el modulo WindowMenuGmrModule dentro de tu modulo principal y en en el HTML poner la etiqueta window-menu-gmr

<window-menu-gmr></window-menu-gmr>

en el TS generar la lista para crear el menu como en el ejemplo:

• Vertebrates
  • Fishes
    • Baikal oilfish
    • Bala shark
    • Ballan wrasse
    • Bamboo shark
    • Banded killifish
  • Amphibians
    • Sonoran desert toad
    • Western toad
    • Arroyo toad
    • Yosemite toad
• Invertebrates
  • Insects
  • Molluscs
  • Crustaceans
  • Corals
  • Arachnids
  • Velvet worms
  • Horseshoe crabs

this.windowMenuModel = new WindowMenuModel();
    windowMenuModel.addItemWithNewMenu('Vertebrates')
      .addItemWithNewMenu('Fishes')
      .addItemWithFunction('Baikal oilfish', this.clickEvent)
      .addItemWithFunction('Bala shark', this.clickEvent)
      .addItemWithFunction('Ballan wrasse', this.clickEvent)
      .addItemWithFunction('Bamboo shark', this.clickEvent)
      .addItemWithFunction('Banded killifish', this.clickEvent);

    windowMenuModel.getItemMenuModelName('Vertebrates')
      .addItemWithNewMenu('Amphibians')
      .addItemWithFunction('Sonoran desert toad', this.clickEvent)
      .addItemWithFunction('Western toad', this.clickEvent)
      .addItemWithFunction('Arroyo toad', this.clickEvent)
      .addItemWithFunction('Yosemite toad', this.clickEvent);
      
    windowMenuModel.addItemWithNewMenu('Invertebrates')
      .addItemWithFunction('Insects', this.clickEvent)
      .addItemWithFunction('Molluscs', this.clickEvent)
      .addItemWithFunction('Crustaceans', this.clickEvent)
      .addItemWithFunction('Corals', this.clickEvent)
      .addItemWithFunction('Arachnids', this.clickEvent)
      .addItemWithFunction('Velvet worms', this.clickEvent)
      .addItemWithFunction('Horseshoe crabs', this.clickEvent);
      
    //generar una funcion para prueba
    clickEvent(btnName: string) {
        console.log(btnName);
    }

agregar la variable windowMenuModel con la lista creada al input de la etiqueta window-menu-gmr y asignarle una variable a la etiqueta con el #. Donde se va a usar el menu al dar clic se tiene que agregar como input matMenuTriggerFor y pasarle el parentMenu de window-menu-gmr para que este funcione.

<window-menu-gmr [windowMenuModel]="windowMenuModel" #appWindowMenu></window-menu-gmr>

<button [matMenuTriggerFor]="appWindowMenu.parentMenu"> click</button>

nota: si trae errores al compilar, agregar en su modulo del proyecto el MatMenuModule.