Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown list is not fitting properly within the bootstrap grid where it's placed. Here's a visual representation of the opened dropdown:
https://i.stack.imgur.com/aeKCj.png
In my package.json file, these are the key Material dependencies (among others):
"@angular/material": "^5.2.5",
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.5",
"hammerjs": "^2.0.8",
I've structured my project with submodules, including relevant imports in both parent and child modules. The necessary imports look like this in the parent module:
imports: [
MatSelectModule,
ReactiveFormsModule
]
And the same imports are included in the child module as well.
Within the actual component that employs the dropdown, here is the html snippet:
<div class="row col-sm-5">
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
</div>
The corresponding TypeScript code includes:
toppings = new FormControl();
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
If there are any insights on what could be going wrong in my setup, I'd greatly appreciate the guidance!