angularng-templatedevextreme-angular

How to use DxTemplate inside a custom component


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>

Solution

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