I need to add functionlity to multible input elements one of which is my current cause for struggle, the MatSelect. For "normal" inputs and checkboxes the basic functionality I am going for was relatively easy to acchieve. I build an Component which functions as an implementation of ContronValueAccessor with the following template:
custom-select.html
<mat-form-field>
<ng-content select="[label]"></ng-content>
<mat-select class="my-custom-select" [(ngModel)]="value">
<ng-content></ng-content>
</mat-select>
</mat-form-field>
I wired it up as is to enable me to still inject custom mat-select-trigger and mat-options that deviate from any standard format.
I expected to be able to use this Component like this:
Consuming-component.html
<app-custom-select formControlName="selectable1">
<mat-label label>Some Label</mat-label>
<mat-select-trigger>
<span>{{ testGroup.get('selectable1')?.value }}</span>
</mat-select-trigger>
<mat-option *ngFor="let option of selectables" [value]="option.value">
<mat-icon>{{ option.icon }}</mat-icon>
{{ option.value }}
</mat-option>
</app-custom-select>
This leads to the following behaviour:
As you can see, I get an actual MatSelect with the label working properly, but no sign of mat-select-trigger and mat-options. Since I was able to properly use content projection with the label and in many other situations in my project I doubt that there is any syntactical problem and there is some kind of behaviour of the mat-select, that is causing this behaviour.
Any ideas, where I might went wrong?
I would really like to get this to work and not redesign a select from scratch.
