How to get a reference to transcluded content

Question

I am trying to implement a DropdownComponent, which will allow a transcluded button (or any other suitable element or an Angular component) to trigger dropdown, and a transcluded div for content that needs to be displayed in the dropdown. Usage of this component will be as follows,

<dropdown>
  <button origin>drop</button>
  <div content>
    <!-- some content -->
  </div>
</dropdown>

I need to get a reference to that button in the DropdownComponent to bind custom css classes.

I could add a css class here in the above code as follows and get reference to that using getElementsByClassName().

<dropdown>
  <button origin class="dropdown-origin">drop</button>
  <div content>
    <!-- some content -->
  </div>
</dropdown>

But, to provide a simpler usage of the DropdownComponent I would like to use origin attribute used to transclude the content to get the reference to the button. Something like this,

@ContentChild('[origin]') origin;

Is there a way to accomplish this? Or is there a better way to do this?

NOTES: My dropdown html is as follows,

<ng-content select="[origin]"></ng-content>

<div class="dropdown-content">
  <ng-content select="[content]"></ng-content>
</div>