2

enter image description hereI am using mat-menu .

<mat-menu #appMenu="matMenu" yPosition="above">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

I want on click of more_vert icon, mat-menu should open on top of it. and an icon should be added on right corner of mat-menuenter image description here In this image the right top corner should be an icon and placed on top of more_vert icon.

Can anyone please help me how to do this.

Added code for table. As mat-menu is present in table data.

 <table class="table">
          <thead>
            <tr>
              <th>Data 1
              </th>
              <th>Data 2
              </th>
              <th>Data 3
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of Data</td>

              <td>
              {{data.val1}}
              </td>
              <td>
               {{data.val2}}
              </td>
              <td>
                      <mat-menu #appMenu="matMenu">
                          <mat-icon>close</mat-icon>
                          <button mat-menu-item>Settings</button>
                          <button mat-menu-item>Help</button>
                        </mat-menu>

                        <button mat-icon-button [matMenuTriggerFor]="appMenu">
                          <mat-icon>more_vert</mat-icon>
                        </button>
              </td>
            </tr>
          </tbody>
        </table>
ananya
  • 1,001
  • 6
  • 33
  • 50

1 Answers1

0

To achieve expected result, use below option

component.ts

<mat-menu #appMenu="matMenu" yPosition="above">
  <mat-icon class="icon">close</mat-icon>
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

component.css:

mat-icon {
  float: right;
  margin-right: 10px;
}

.icon {
  position: relative;
  top: 14px;
  right: -10px;
  z-index: 9999;
}

style.css:

.cdk-overlay-container {
  position: relative;
  top: -70px;
}

code sample for reference - https://codesandbox.io/s/k98pz5l98r

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40
  • .I want something like the above image which i have uploaded just now after editing my question.Can you please help me how to add a icon like that.@Naga Sai A – ananya Apr 04 '19 at 16:20
  • @ananya, updated my post and attached codesandbox for reference – Naga Sai A Apr 04 '19 at 19:09
  • I have tried this. But it is not working as expected. Actually I have this mat-menu in each row in td of a table. Do i need to change z-index value? @Naga Sai A – ananya Apr 05 '19 at 05:50
  • without z-index, close icon will be in the background and the mat menu content will be in the foreground – Naga Sai A Apr 05 '19 at 15:48
  • As the mat-menu is present on top of , so do i need to give any different value for z-index?Because half of close icon is visible and other half is not visible which is outside mat-menu. @Naga Sai A – ananya Apr 05 '19 at 19:04
  • i think table code is missing in your code, for , could you please update those details – Naga Sai A Apr 05 '19 at 19:32
  • I have updated code .Please have a look . @Naga Sai A – ananya Apr 05 '19 at 19:53