I created a custom select component and attempted to utilize ng-content to pass in my options. Here is the code snippet I used:
<lib-select [(selected)]="selected" (selectedChange)="onChange($event)">
<mat-option [value]="0">Value 1</mat-option>
<mat-option [value]="1">Value 2</mat-option>
<mat-option [value]="2">Value 3</mat-option>
<mat-option [value]="3">Value 4</mat-option>
<mat-option [value]="4">Value 5</mat-option>
</lib-select>
However, this approach did not work as expected. The options were not displayed initially. Even after applying a workaround to show them, I still couldn't select anything. Below is the code snippet of my component:
<mat-select panelClass="select" disableRipple (selectionChange)="onChange()" [(value)]="selected" disableOptionCentering>
<mat-select-trigger>{{selected}}</mat-select-trigger>
<!-- A hidden mat-option below is necessary for rendering ng-content in mat-select. This is more of a hack than an ideal solution -->
<mat-option [value]="" style="display: none;"></mat-option>
<ng-content></ng-content>
</mat-select>
Is there a way to make this setup function correctly or does mat-select simply not support ng-content?
I'm aware that I could use @Input() to send the options into the component, but I prefer the cleaner look achieved with ng-content.
UPDATE: It turns out I am able to select items. The issue lies in the fact that I can select multiple options and see a ripple effect, despite having disableRipple set on my mat-select element.