Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transcluded for ng-template not working

See original GitHub issue

Hello, Trying to implement trancluded for the template but it is ignored… That component is a wrapper for reactive forms and this approach works for other type of inputs… Any feedback will be appreciated. Thanks

Angular7/ng-select^2.20.5

From:

<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>

To:

/// parent using custom component and passing ng-template
<ngdc-form-item [form]="form" [item]="item('city')">
    <ng-template ng-label-tmp let-item="item">
        <img height="15" width="15" [src]="item.avatar"/>
        {{item.name}} [{{item.id}}]
    </ng-template>
</ngdc-form-item>

/// component template
<ng-container>
    <ng-select
        [loading]="item.ctrl.dropdownOptions.isLoading"
        [items]="item.ctrl.dropdownOptions.list"
        [bindLabel]="item.ctrl.dropdownOptions.text"
        [bindValue]="item.ctrl.dropdownOptions.value"
        [multiple]="item.ctrl.dropdownOptions.multiple"
        [placeholder]="item.ctrl.placeholder"
        [maxSelectedItems]="item.ctrl.dropdownOptions.maxSelectedItems"
        [formControlName]="item.field"
        [(ngModel)]="form.value[item.field]"
    >
        <ng-content></ng-content>
    </ng-select>
</ng-container>

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

Komockcommented, Feb 6, 2020

@MacGyver27 To pass template down you don’t need <ng-content> use <ng-template *ngTemplateOutlet> instead.

// Parent component template
<ngdc-form-item [form]="form" [item]="item('city')">
    <ng-template #labelTemp let-item="item">
        <img height="15" width="15" [src]="item.avatar"/>
        {{item.name}} [{{item.id}}]
    </ng-template>
</ngdc-form-item>

// ngdc-form-item component
@ContentChild('labelTemp') labelTemp: TemplateRef<any>;

// ngdc-form-item template
<ng-select>
  <!-- Selected Item Template -->
  <ng-template *ngIf="labelTemp" ng-label-tmp let-item="item">
    <ng-template *ngTemplateOutlet="labelTemp; context: { item: item }"></ng-template>
  </ng-template>
</ng-select>

1reaction

Komockcommented, Feb 6, 2020

@MacGyver27 Hi, you can do it with <ng-template *ngTemplateOutlet>.

Like in our ng-select wrapper: https://github.com/evotor/Evo-UI-Kit/blob/master/projects/evo-ui-kit/src/lib/components/evo-autocomplete/components/evo-autocomplete.component.html#L53

Top Results From Across the Web

ng-transclude not working in template AngularJS

The reason you need to change the recipe is because Angular changed how transclusion works between v1.0 and v1.2.

ngTransclude - AngularJS: API

This example demonstrates basic transclusion of content into a component directive. Edit in Plunker. index.html protractor.js. <script> angular.

Content projection - Angular

With an <ng-template> element, you can have your component explicitly render content based on any condition you want, as many times as you...

ngTransclude orphaning bug? - Google Groups

The ng-transclude directive is pretty simple, it just takes the transclude function injected into the current context and calls it. However, when you...

How to do transclusion in Angular (ES5) - Nicholas Johnson

In AngularJS, the $scope of the transclusion was the same as the parent template. From the perspective of an front end designer writing...