1

Tengo este problema, y el caso es que se supone que todo está hecho de forma correcta. Cuando intento que se vea un menu, tal y como especifican en la documentación de componentes de Angular material no se ven. Adjunto mi código para que os hagáis una idea:

<header id="mainHeader">
  <mat-toolbar color="primary">
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  </mat-toolbar>
</header>
<router-outlet></router-outlet>
<footer>
  <mat-toolbar color="accent">
    <small></small>
  </mat-toolbar>
</footer>

Este que veis es mi app.component.html. Ahora adjunto el código del app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'TITULO';
}

El caso es que no he tocado nada, lo he hecho directamente en un proyecto desde cero para ver podía encontrar el porqué, pero nada...

Adjunto el código de app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatMenuModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatButtonToggleModule,
    MatPaginatorModule,
    MatTableModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Package.json:

  "dependencies": {
    "@angular/animations": "~9.0.2",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/material": "^9.1.0",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.3",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.2",
    "@angular/language-service": "~9.0.2",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }

¿Alguien ve si me falta algo o lo estoy haciendo de forma incorrecta? Nunca se me había planteado este problema, pero llevo un rato haciendo pruebas, y no lo llego a entender. Gracias de antemano por la atención prestada.

1 respuesta 1

1

Te falto agregar el

<button mat-button [matMenuTriggerFor]="menu">Menu</button>

a tu codigo

<mat-toolbar>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</mat-toolbar>

para que te salga el menu quedaria asi

<mat-toolbar>
    <button mat-button [matMenuTriggerFor]="menu">Menu</button> 
        <mat-menu #menu="matMenu">
            <button mat-menu-item>Item 1</button>
            <button mat-menu-item>Item 2</button>
        </mat-menu>
</mat-toolbar>

Ejemplo de Angular Material

1
  • Muchas gracias, Andrés Abadía. Estás en lo cierto. Pero al final lo que pretendía era tener los enlaces sin estar encerrados en el menú. Con lo cual el mat-menu, no sería necesario. Había confundido conceptos y la forma de usar el "mat-menu". No obstante, te agradezco mucho que me hayas sacado de la duda. Gracias.
    – H. Díaz
    el 6 mar. 2020 a las 11:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.