Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image:
https://i.stack.imgur.com/z70Aq.png
This snippet showcases my code:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<button mat-button> Products</button>
<mat-menu #menu="matMenu" overlapTrigger="true">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
Moreover, I'm facing issues with images not displaying accurately in my HTML output, as shown here:
https://i.stack.imgur.com/IrNW7.png
No console errors are reported, and these are the imports used:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { ProductComponent } from './product/product.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
MatMenuModule,
MatButtonModule,
MatIconModule,
MatGridListModule,
MatListModule
} from '@angular/material';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
WelcomeComponent,
ProductComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatMenuModule,
MatButtonModule,
BrowserAnimationsModule,
MatIconModule,
MatGridListModule,
MatListModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm curious why my options appear gray and why is the overlay not functioning properly. Any insights would be greatly appreciated. Thank you.