问题
im trying to create my own select component
so the final result will be like that
in app.components.html for example
<div>
<app-my-select [(ngModel)]="val">
<app-my-option value="1" >one</app-my-option>
<app-my-option value="2" >two</app-my-option>
<app-my-option value="3" >three</app-my-option>
<app-my-option value="4" >four</app-my-option>
</app-my-select>
</div>
in my-select.component.html
<input (click)="openPanel()" class="select-value-container" readonly (keydown)="keyDown($event.key)"
type="text" (blur)="onTouched()" (input)="onInputChange(origin.value)" [disabled]="disabled" [value]="options[index]" #origin>
<ng-template #panelTemplate>
<div class="drop-down">
<ng-container
[ngTemplateOutlet]="myOptionTemplate"
[ngTemplateOutletContext]="{optionSelected = 'optionSelected'}">
</ng-container>
</div>
</ng-template>
-> I used ng-template for select drop down because i want to pass it to CDK overlay and it works fine
my-select.component.ts
...
@ContentChild(NgOptionTemplateDirective) myOptionTemplate: TemplateRef<any>;
...
my-option.component.html
<ng-template ng-option-tmp let-optionSelected>
<ng-content></ng-content>
</ng-template>
the issue is how I can project my-option templates inside select component
in another way what i should write in " ngTemplateOutlet " directive
and the final question is how I can get a reference to all my-option templates in my-select component is it bu using '@ContentChildren'
Updated Quesion:
how I can get reference to options templates as QueryList of TemplateRef.
because for now I can get reference to them as QueryList of MyOptionComponent
I have another suggestion by using div inside my-option html instead of ng-template so I can use just ng-content and not ng-template-outlet
but the new question will be how I can pass optionSelected event to parent component I mean my-select component without using ng-template
来源:https://stackoverflow.com/questions/63511926/reusable-component-in-angular