Rewrite angular directive which uses template variables

Question

I've written a structural directive which sets the itemTemplate on my custom Select2Component

@Directive({ selector: '[bsItemTemplate]' })
export class BsItemTemplateDirective {
  constructor(private select2component: BsSelect2Component, templateRef: TemplateRef<any>) {
    this.select2component.itemTemplate = templateRef;
  }
}

At the moment it's being used like this:

<h2>Select2 with custom template</h2>
<bs-select2 (provideSuggestions)="onProvideTagSuggestions($event)" [suggestions]="tagSuggestions" [selectedItems]="selectedTags">
    <ng-template bsItemTemplate let-item="item" let-select2="select2">
        <span class="select2-item" [style.background]="item.category.color" [style.color]="item.category.color | bsFontColor">
            <span (click)="select2.onRemoveItem(item,$event)">×</span>
            {{ item.text }}
        </span>
    </ng-template>
</bs-select2>

And rendered like this:

<div bsDropdown [(isOpen)]="isOpen">
    <ng-container *ngFor="let item of selectedItems">
        <!-- Render the template -->
        <ng-container *ngTemplateOutlet="itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }"></ng-container>
    </ng-container>

    <input type="text" [(ngModel)]="searchterm" />
    <div *bsDropdownMenu>
        <ul>
            <li *ngFor="let suggestion of suggestions">{{ suggestion.text }}</li>
        </ul>
    </div>
</div>

I want to be able to rewrite this using the star notation (*bsItemTemplate)

Answer 1

You can do it like this:

<bs-select2 (provideSuggestions)="onProvideTagSuggestions($event)" [suggestions]="tagSuggestions" [selectedItems]="selectedTags">
    <span *bsItemTemplate="let item = item; let select2 = select2">
        <span (click)="select2.onRemoveItem(item,$event)">×</span>
        {{ item.text }}
    </span>
</bs-select2>