How to use DxTemplate inside a custom component

Question

I used DevExtreme library, How to use DxTemplate directive into a custom Component that wrap the DxLookupComponent ? If it is possible, how to proceed ?

I have a "wrapper" that add more functionnalities to DxComponent (Textbox, Textarea, Datebox and Selectbox) and it works well. But I need to use the DxTemplate directive into my wrapper Component to display template into the DxLookupComponent.

My look code look like this :

<app-dx-lookup-wrapper ...(here I have some properties that will be pass to the DxLookupComponent )>

        <div *dxTemplate="let data of 'titleTemplate'">
        // How to proceed here
        </div>
        <div *dxTemplate="let data of 'itemTemplate'">
        // How to proceed here
        </div>
        <div *dxTemplate="let data of 'fieldTemplate'">
        // How to proceed here
        </div>

</app-dx-lookup-wrapper>

Inside my wrapper component :

<app-dx-wrapper ...(properties of my wrapper)>
        <dx-lookup ...(here goes properties of the DxLookup)>
            <ng-content></ng-content>
        </dx-lookup>
</app-dx-wrapper>

score 3 · Accepted Answer · answered Oct 03 '20 at 18:14

maybe you can reuse this approach with ContentChildren and custom directive:

First lets create custom directive - maybe I found this here

@Directive({
  selector: "[templateName]"
})
export class TemplateNameDirective {
  @Input() templateName = "";

  constructor(public templateRef: TemplateRef<any>) {}
}

AppDxLookupWrapperComponent.ts:

@ContentChildren(TemplateNameDirective) templates: QueryList<TemplateNameDirective>;

app-dx-lookup-wrapper.component.html:

<div *ngFor="let template of templates; let i = index">
  <ng-template
    *dxTemplate="let item of template.templateName"
    [ngTemplateOutletContext]="{ item: item }"
    [ngTemplateOutlet]="template.templateRef"
  ></ng-template>
</div>

Then you can usee this "templates" like this:

<app-dx-lookup-wrapper>
  <ng-template let-item="item" templateName="titleTemplate">
        {{yourFunction(item)}}
  </ng-template>
  ... other ng-templates here
</app-dx-lookup-wrapper>

Let me know if this gets you started.

How to use DxTemplate inside a custom component

1 Answers1