I would like to click the alarm icon and that creates a dropdown menu.
I have already seen this
Here is what I have already tried on this demo
I still have the dropdown input box, which I want removed, so I can only see the icon before clicking. I would like it so that it is only the icon and when that gets pressed, it generates the dropdown.
How can I achieve this?
PS: it would be great to see a demo of it on Stackblitz :)
I would like to click the alarm icon and that creates a dropdown menu.
I have already seen this
Here is what I have already tried on this demo
I still have the dropdown input box, which I want removed, so I can only see the icon before clicking. I would like it so that it is only the icon and when that gets pressed, it generates the dropdown.
How can I achieve this?
PS: it would be great to see a demo of it on Stackblitz :)
Share Improve this question edited Dec 13, 2018 at 8:54 apollowebdesigns asked Dec 13, 2018 at 8:47 apollowebdesignsapollowebdesigns 7681 gold badge13 silver badges30 bronze badges 6- Can you show us what you've tried so far? – Julien Lachal Commented Dec 13, 2018 at 8:50
- @JulienLachal It's on the demo link above. But here it is again stackblitz./edit/angular-e7twlq?file=app/… – apollowebdesigns Commented Dec 13, 2018 at 8:52
- Sorry, wasn't clear, I thought you were showing 2 different links of what you had seen, my bad. – Julien Lachal Commented Dec 13, 2018 at 8:53
-
1
boolean
flag will do a trick but not sure this is what you wanted? To achieve this in a proper way need to apply CSS – Prashant Pimpale Commented Dec 13, 2018 at 9:01 -
You need to try to hide the arrow, put no background on the
mat-form-field-underline
and reposition themat-icon
of the alarm clock – Julien Lachal Commented Dec 13, 2018 at 9:04
2 Answers
Reset to default 5I think you can achieve what you're looking for just by using some CSS, essentially hiding the .mat-select-arrow-wrapper
element and adjusting some padding.
I've created a StackBlitz example that you can have a look at.
Nowdays i think someone would use the Angular Material Menu Component.
see Angular Material Docs: Menu Component Example "Menu with icons".
If someone stumbles over this like my colleague.