Pass ng-template From A Component To ng-select Inside Another Component

I'm trying to pass an ng-template from my main component into an ng-select inside another component. How can I do so?

I already tried to use ng-content or a template reference but it is still not working.

What I am trying to achieve is exactly the same as the ng-select custom template example, except that the ng-template is provided from another component. So instead of this:

<ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindValue="name">
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15" [src]="item.avatar"/>
{{item.name}}
</ng-template>
</ng-select>


I'm trying to achieve something similar to this:

select-custom.component.html

<ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindValue="name">
<ng-content></ng-content> --> This is not working, templateref is also not working
</ng-select>


app.component.html

<app-select-custom>
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15" [src]="item.avatar"/>
{{item.name}}
</ng-template>
</app-select-custom>

Continue reading...