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

Question

Basically I am looking to dynamically add (multiple) option tags to an 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.

I need to be able to accept completely custom html in some fashion, it can be a div, or a list of elements or whatever, but it must be able to display custom html in the select options (not just simple strings as the options)..

Below is a very simple example but keep in mind I need to be able to accept any html.. (break it down / or whatever / and then display that html in my select)

-

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

<hxgn-common-dropdown [dynamicContent]="true" [(value)]="selected">
  <hxgn-common-dropdown-items>
    <mat-option [value]="1">
      <span class="example">I'm dynamic content = 1</span>
    </mat-option>
    <mat-option [value]="2">
      <span class="example>I'm dynamic content = 2</span>
    </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 am basically looking for any way to create a 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.

added stackblitz: https://stackblitz.com/edit/angular-mat-select-custom-options?file=src%2Fapp%2Fapp.component.html

could you please explain more? i'm familiar with ngFor but i dont understand how to break up the custom html content into separate option tags — JBoothUA
It may not meet your specific needs. stackblitz.com/edit/angular-pudrt4 — dc-p8
Could you give more explanation of what you try to achieve? maybe the final output... — dK-
i want the end result to be a dropdown list with the first option of "I'm dynamic content = 1" and the second option of "I'm dynamic content = 2" (if you look at my code example) — JBoothUA

dK- dK- · Accepted Answer · 2018-09-03T23:15:45

Here is how you could do it: you could create a directive so that you can Query the directive. The directive doesn't have to have anything. Once you obtain the List of Directives, you can then read the ElementRef like @ContentChildren(MyDirective, {read: ElementRef})

Then you can render out the ElementRef however you like inside your custom component. Setup a sample Stackblitz and I can work with you on that....

Update: Instead of reading ElementRef, you wrap the content projected element in a TemplateRef and Query the common-dropdown-items from common-dropdown. Then you loop through the common-dropdown-items TemplateRef as the content of mat-option.

refer to this stackblitz example https://stackblitz.com/edit/angular-8dibtq

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

2 Answers