My select option is not working properly and I keep getting an error in the console that says:
- To resolve this issue, make sure to import either
BrowserAnimationsModuleorNoopAnimationsModulein your application.
Here's my Typescript code:
import { Component } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { DatePipe } from '@angular/common';
import { MatListModule } from '@angular/material/list';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
export interface legend {
name: string;
image: string;
tooltip: string;
}
export interface maplist {
name: string;
legends: Array<legend>
}
@Component({
selector: 'app-legend',
standalone: true,
imports: [MatListModule, MatIconModule, MatDividerModule, DatePipe,
MatSelectModule, MatTooltipModule, MatFormFieldModule, FormsModule,
],
providers: [
provideAnimations()
],
templateUrl: './legend.component.html',
styleUrl: './legend.component.css',
})
export class LegendComponent {
selectedValue: Array<legend> = [];
maplistdata: maplist[] = [
{
name: "Echocondria",
legends: [
{
name: "House",
image: "",
tooltip: "Living quarters for the residents."
},
{
name: "Shop",
image: "",
tooltip: "Places to buy and sell goods."
},
]
},
{
name: "Echocondria Sewers",
legends: [
{
name: "House",
image: "",
tooltip: "Living quarters for the residents."
},
{
name: "Shop",
image: "",
tooltip: "Places to buy and sell goods."
},
]
},
]
}
Here's my HTML code:
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select
color="primary"
[(ngModel)]="selectedValue" name="legendselect"
>
<mat-option>None</mat-option>
@for (legend of maplistdata; track legend) {
<mat-option [value]="legend.legends">{{legend.name}}</mat-option>
}
</mat-select>
</mat-form-field>
@for (legenditem of selectedValue; track legenditem) {
<mat-list-item>
<mat-icon matListItemIcon>folder</mat-icon>
<div matListItemTitle [matTooltip]="legenditem.tooltip"><img class="legendIcon" [src]="legenditem.image"/> {{ legenditem.name }}</div>
<div matListItemLine>{{legenditem.tooltip}}</div>
</mat-list-item>
}
I've already tried importing the required modules but still facing the same error or duplicates. Any advice would be appreciated.