title: Mat Menu Trigger on Parent Element from Child
body: <p>I would like to position a mat menu popup relative to a parent element.</p>
  
  <p>Angular's documentation says the following about mat menu position:</p>
  
  <blockquote>
    <p>By default, the menu will display below (y-axis), after (x-axis), without overlapping its trigger</p>
  </blockquote>
  
  <p>This is very nice but it's relative to the trigger (matMenuTriggerFor).</p>
  
  <p>I want the menu to open relative to the parent element. Click on button inside div, mat men displays without overlapping it's relative element.</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;gridster-item [item]="w" [class.editing]="w.editing"&gt;
        &lt;div class="primary-header widget-settings-bar" color="primary" *ngIf="showSettingsBar == true"&gt;
          &lt;div class="widget-settings-button contrast-color"&gt;
            &lt;mat-icon class="icon" aria-hidden="false" aria-label="Delete" [matMenuTriggerFor]="appMenu"&gt;settings
            &lt;/mat-icon&gt;
          &lt;/div&gt;
          &lt;div class="widget-settings-button contrast-color"&gt;
            &lt;mat-icon class="icon" aria-hidden="false" aria-label="Duplicate" (click)="duplicateDashboardWidget(w)"&gt;
              control_point_duplicate&lt;/mat-icon&gt;
          &lt;/div&gt;
          &lt;div class="widget-settings-button contrast-color"&gt;
            &lt;mat-icon class="icon" aria-hidden="false" aria-label="Delete" (click)="deleteDashboardWidget(w)"&gt;delete
            &lt;/mat-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="grid-widget mat-card2"&gt;
          &lt;ndc-dynamic [ndcDynamicComponent]=components[w.component] [ndcDynamicInputs]="w"&gt;&lt;/ndc-dynamic&gt;
        &lt;/div&gt;
      &lt;/gridster-item&gt;
  </code></pre>
  
  <p>Here is the widget component I'm talking about.
  <a href="https://i.stack.imgur.com/kPZYE.png" rel="nofollow noreferrer">Unopened Component (hovering)</a></p>
  
  <p>Here is what happens when you click the matMenuTriggerFor that triggers menu. notice it's overlapping the parent div.
  <a href="https://i.stack.imgur.com/KzO9e.png" rel="nofollow noreferrer">Triggered from button</a></p>
  
  <p>This is what I want. The menu pops up relative to the parent element. Notice it's not overlapping the div because I put the matMenuTriggerFor on the gridster-item parent.</p>
  
  <p><a href="https://i.stack.imgur.com/sPgMB.png" rel="nofollow noreferrer">Triggered from div</a></p>
  
  <p>Problem is I can't figure out how to make this menu open without matMenuTriggerFor and I don't want the menu to open when clicking on the parent div. I only want the menu to open when clicking the small cogwheel button.</p>
  
  <pre><code>&lt;gridster-item [item]="w" [class.editing]="w.editing" [matMenuTriggerFor]="appMenu"&gt;
    &lt;div class="primary-header widget-settings-bar" color="primary" *ngIf="showSettingsBar == true"&gt;
      &lt;div class="widget-settings-button contrast-color"&gt;
        &lt;mat-icon class="icon" aria-hidden="false" aria-label="Delete"&gt;settings
        &lt;/mat-icon&gt;
      &lt;/div&gt;
      &lt;div class="widget-settings-button contrast-color"&gt;
        &lt;mat-icon class="icon" aria-hidden="false" aria-label="Duplicate" (click)="duplicateDashboardWidget(w)"&gt;
          control_point_duplicate&lt;/mat-icon&gt;
      &lt;/div&gt;
      &lt;div class="widget-settings-button contrast-color"&gt;
        &lt;mat-icon class="icon" aria-hidden="false" aria-label="Delete" (click)="deleteDashboardWidget(w)"&gt;delete
        &lt;/mat-icon&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-widget mat-card2"&gt;
      &lt;ndc-dynamic [ndcDynamicComponent]=components[w.component] [ndcDynamicInputs]="w"&gt;&lt;/ndc-dynamic&gt;
    &lt;/div&gt;
  &lt;/gridster-item&gt;
  </code></pre>