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

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

2 Answers
2

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)

Query

List

Directives

ElementRef

@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.

ElementRef

TemplateRef

common-dropdown-items

common-dropdown

common-dropdown-items TemplateRef

mat-option

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

mat-option

mat-select

have you tried using JQuery Accordion?

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.