Angular Material Mat-Menu

Question

I am using Angular 8 with Angular Material and want to create a pop-up for a vertical dot menu which would look something like this image(corresponding html added below):

<div>
    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle overflow-menu-toggle" data-flip="false" data-toggle="dropdown" href="#" id="dropdownOverflowMenu_v" role="button"><i class="material-icons">more_vert</i></a>
    <div aria-labelledby="dropdownOverflowMenu_v" class="dropdown-menu overflow-menu overflow-menu--vertical dropdown-menu-right dropright">
        <button class="dropdown-item"><i class="material-icons">email</i> Message </button>
        <button class="dropdown-item"><i class="material-icons">vertical_align_bottom</i> Download </button>
        <button class="dropdown-item"><i class="material-icons">edit</i> Edit </button>
        <button class="dropdown-item"><i class="material-icons">delete</i> Delete </button></div>
</div>

With Angular Material, I've managed to create the below pop-up(corresponding html added below) but the not able to get the top triangle like extended part(like highlighted in the above image)

<mat-menu #actionmenu="matMenu" class="actionMenu">
                  <mat-list>
                    <div *ngIf="item.isEditable">
                      <div mat-subheader><b>ACTIONS</b></div>
                      <mat-list-item>
                        <button mat-flat-button class="p-0" (click)="onEdit(item)">
                          <i class="material-icons">edit</i>
                          Edit
                        </button>
                      </mat-list-item>
                      <mat-list-item>
                        <button mat-flat-button class="p-0" (click)="onDelete(item)">
                          <i class="material-icons">delete</i>
                          Delete
                        </button>
                      </mat-list-item>
                    </div>
                  </mat-list>
                </mat-menu>

Can you please help with this?

Answer 1

Adding a triangular CSS::before element that is positioned correctly will achieve what you want. Be warned, however, that restyling Angular Material elements is notoriously annoying to do, but you'll find plenty of examples online.