Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

158
Vistas
Angular2 Obtener referencia a Material MdMenu creado en ngFor

Lo que estoy tratando de lograr

Estoy tratando de crear dinámicamente un menú en cascada de 2 niveles con componentes angulares y materiales.

  • El primer nivel se compone de una md-nav-list con un montón de
    md-list-items que contienen botones creados usando ngFor
  • El menú de segundo nivel es un md-menú con botones. El botón md-menu se genera utilizando un anidado
  • Ahora, me gustaría activar el menú de segundo nivel al pasar el mouse sobre un elemento de primer nivel.

     ... // Level 1 Menu <button class="cq-but" md-menu-item *ngIf="item.type === 'sub'" [mdMenuTriggerFor]= ... // <- how do I reference mdMenu here?? item.name </button> // Level 2 Menu <md-menu class="cq-popup" *ngIf="item.type === 'sub'" #subMenu="mdMenu" id=item.name> <button md-menu-item *ngFor="let childitem of item.children"> childitem.name </button> </md-menu> </md-list-item>

en que necesito ayuda

El menú md generado dinámicamente debe activarse mediante un [mdMenuTriggerFor] en los botones del primer nivel.

Como he señalado en el fragmento de código anterior, mi pregunta es... ¿cómo me vinculo al componente md-menu generado dinámicamente en mi directiva mdMenuTriggerFor?

** Lo que he intentado **: traté de obtener una referencia al submenú usando ViewChildren, es decir

 // @ViewChildren('subMenu') public subMenu:QueryList<MdMenu>;

con la esperanza de activar el menú mediante programación sin tener que proporcionar la directiva mdMenuTriggerFor en la plantilla. Sin embargo, eso no funciona porque, según https://material.angular.io/components/component/menu , la directiva mdMenuTriggerFor es necesaria para adjuntar el menú a un elemento desencadenante en el DOM.

Abierto a otros enfoques. ¡Gracias!

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Aquí hay una forma de hacerlo: puede usar <ng-container> y simplemente creará un ámbito privado para su variable de plantilla ( https://stackblitz.com/edit/repeating-menu-approach-2 ):

 <table class="table table-striped"> <ng-container *ngFor="let el of [1,2,3,4,5]"> <tr> <td>Text line of menu {{el}}</td> <td style="width: 5%"> <button mat-icon-button [matMenuTriggerFor]="menu"> <mat-icon>more_vert</md-icon> </button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="clickHandler('Item 1 of Menu ' + el)">Menu {{el}}:Item 1</button> <button mat-menu-item (click)="clickHandler('Item 2 of Menu ' + el)">Menu {{el}}:Item 2</button> </mat-menu> </td> </tr> </ng-container> </table>

Curiosamente, cada #menu de plantilla de #menú anterior será única, aislada con éxito de las otras variables de plantilla de #menú creadas por el bucle *ngFor #menu

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda