I am currently trying to dynamically populate a select tag with multiple option tags based on custom HTML content.
While I understand how to insert dynamic content with ng-content, my challenge lies in separating the dynamic content and wrapping it in mat-option tags.
It is essential for me to be able to accept completely custom HTML in some form, whether it's a div, list of elements, or any other structure. The select options should display this custom HTML, not just simple strings as options.
The example below demonstrates what I'm aiming for, but it's important to note that I need to support any type of HTML input:
-
Another approach I considered was using a single ng-content tag containing 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>
I expected these two options to appear in my mat-select:
<mat-select>
<ng-content select="hxgn-common-dropdown-items"></ng-content>
</mat-select>
However, only an empty mat-select was rendered. Could it be that the mat-select doesn't work with ng-content? Am I overlooking something?
Is there a more effective method to achieve this goal?
I am seeking any solution that allows me to create a select based on custom HTML. This way, developers can provide HTML input to my control, and the drop-down list will automatically render accordingly.
For reference, here's the StackBlitz link: https://stackblitz.com/edit/angular-mat-select-custom-options?file=src%2Fapp%2Fapp.component.html