docs-bug(overlay): Suggestion for semantically clearer naming in Overlay example

[stephanietuerk]

Documentation Feedback

Overview

This is a suggestion to, in the code example for the Overlay, change the name of the #trigger template reference variable to something that better communicates the function of the reference, for example #origin.

Code example from page

<!-- This button triggers the overlay and is it's origin -->
<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
  {{isOpen ? "Close" : "Open"}}
</button>

<!-- This template displays the overlay content and is connected to the button -->
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
  (detach)="isOpen = false"
>
  <ul class="example-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</ng-template>

Reasoning

I'm only adding this issue because I am currently looking at this example years after I first looked at it, and am remembering that that variable name was very confusing to me at the time. Being new to Angular, I was confused about whether that was naming the element that emitted an action that triggered the display of the overlay, given the name.

In fact, it does not matter where the show/hide behavior is triggered from. What this template ref variable is doing is identifying the attachment point.

Details

If you all agree with this idea, I'm happy to put in a PR for this myself as I realize it is a very small user experience enhancement and not anything critical.

Affected documentation page

https://material.angular.dev/cdk/overlay/examples

[jjalbuenacabuyao]

Alternatively, you could go even more explicit with #overlayOrigin