How can I add multiple select options based on html content?

Basically I am looking to dynamically add (multiple) mat-option tags to an mat-select tag based on custom html content..

I am familiar with inserting dynamic content with ng-content, the rub here is the dynamic content needs to be separated out and wrapped in mat-option tags.

Even worse, what I thought was going to work as a fall back, would be to use a single ng-content to add multiple mat-options..

<hxgn-common-dropdown [dynamicContent]="true" [(value)]="selected">
  <hxgn-common-dropdown-items>
    <mat-option [value]="1">
      I'm dynamic content = 1
    </mat-option>
    <mat-option [value]="2">
      I'm dynamic content = 2
    </mat-option>
  </hxgn-common-dropdown-items>
</hxgn-common-dropdown>

And I was hoping that those 2 options would appear in my mat-select:

<mat-select>
    <ng-content select="hxgn-common-dropdown-items"></ng-content>
</mat-select>

Unfortunately, that just renders an mat-select with NO options.. I guess the mat-select doesn't work with ng-content? Or am I missing something maybe?

Is there a better way to do this?

I might have to resort to grabbing and looping through the ng-content's child elements and adding mat-options in an ngFor? But that also sounds pretty difficult...

I've been looking at ngTemplateOutlet but I think I will have the same problem if I try to dynamically add mat-options?

Thanks in advance! Let me know if I can supply any more information.

I am basically looking for any way to create a mat-select based of off custom html. That way devs can just supply some html to my control and it will automagically render the drop down list.

from How can I add multiple select options based on html content?