reusable component in angular

问题

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

标签

angular

ng-template