0

I am not looking for expandable row as explained at link Expandable table rows in angular 4 with angular material

All I need is to show a small floating div where i clicked the mouse. (selected a row). I have a sample ready for highlighting selected row and the floating div that right now shows below the table. Select row show div, select gain hide div. Please help to show where mouse clicked/row selected. Code is at link https://stackblitz.com/edit/div-on-click

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Gullu
  • 3,477
  • 7
  • 43
  • 70
  • You want something akin to the little box that appears with controls like `mat-select`, `mat-menu` and such? – IvanS95 Nov 16 '18 at 17:49
  • @IvanS95, reason i said div was then i could include anything i wanted like mat-card in that floating div. I actually need to show a little 3 column table in that div. thanks – Gullu Nov 16 '18 at 20:13
  • I understand, was just askin if you are thinking on something similar to the modal boxes for `mat-select` and `mat-menu`, I'm thinking it can be done working with this but I haven't really tried it: https://material.angular.io/cdk/overlay/overview – IvanS95 Nov 16 '18 at 20:48
  • 1
    @IvanS95, thanks for the overlays tip. I found an awesome article by which I can easily do what I need in an alternative way using overlays. Link is https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html – Gullu Nov 19 '18 at 14:50

1 Answers1

2

I know on this question you mention you are not wanting expandable row... I will go ahead and post the stack blitz example here for your review using expandable row, this uses expandable row which is not what you want but it was created in response to your previous question which was closed as duplicate before I could post it... I just wanted to post here for your review to demonstrate how expandable rows work in your stackblitz example... After review, if this will not meet your requirements please let me know and I will remove.

https://stackblitz.com/edit/div-on-click-qqcdmx?embed=1&file=app/table-basic-example.html

Also, here is stackblitz example of right click context menu in mat-table for your review as well.

https://stackblitz.com/edit/angular-material-context-menu-table?file=app/context-menu-example.html

Marshal
  • 10,499
  • 2
  • 34
  • 53
  • the way you have done it looks like will meet my needs. Awesome!. Appreciate it. Thanks – Gullu Nov 19 '18 at 14:35