Menu
I am using angular 6.1.3, and angular/material 6.4.5 (all in latest version) But when I run the following code, it always has a blue select box.
I tried this on both chrome and IE, and both has the same problem.
Is there any way to remove the blue box?
Thanks!
<mat-menu #usermenu [overlapTrigger]="false">
<button mat-menu-item>
<mat-icon>face</mat-icon>
<label>Profile</label>
</button>
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>
<label>Logout</label>
</button>
</mat-menu>
817
You can read more about selects in the Material Design spec. To use angular material select, use <mat-select> formControl for selecting a value from the set of options. It is designed to work inside of an <mat-form-field> element. We can add options to the select by adding <mat-option> elements to the <mat-select>.
So, add the following code inside the app.component.html file. We will display two select fields. We are using angular ngfor directive to render all the options of the select box and display one by one with its values and viewValues. Save the file and see the output.
To implement menu items in Angular we can use angular material menu module called MatMenuModule. mat-menu selector is used to display floating menu panel containing list of menu items.
The width can be regulated with CSS styles, as well. To create a material dropdown in Angular, use the <mat-select> form control. Angular material provides <mat-select> form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec.
I solved this problem by @SuperDJ's comment,
Added css "outline: none" to my button
Hope this may help who has the same problem with me.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
