CODEWITHSUNDEEP
angulartypescriptangular-material2
user1893354
user1893354

Reputation: 5938

Angular2 Material select dropdown does not close after it is opened

I am new to Node and I am trying to use the dropdown from Angular Material. The problem is that once the dropdown is opened it cannot be closed (by clicking another region of the page), a secondary problem is that the dropdown list is not fitting in the bootstrap grid that it is placed in. Below is an image of the opened dropdown

enter image description here

Here is the Material dependency lines in my package.json folder (obviously there are other dependencies as well).

"@angular/material": "^5.2.5",
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.5",
"hammerjs": "^2.0.8",

I am using submodules in my project so in the parent module I am including the imports (there are other imports as well but these are the relevant ones)

imports: [
    MatSelectModule,
    ReactiveFormsModule
]

and in the child module I include the identical imports.

In the actual component which uses the dropdown I have the html

<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>

and the relevant typescript is 

toppings = new FormControl();

toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

Can anyone see what I am doing wrong here?

Upvotes: 1

Views: 1847

Answers (1)

Hussein
Hussein

Reputation: 1153

Include one of the material themes into your main css/sass file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

or add it in your index.html head tag

Upvotes: 3

Related Questions