Define a complex layout in full HTML

[Sébastien GUISSE]

Hello Could you provide an example of layout with nested ejs-splitter Horizontal and Vertical full in HTML

Like this one :

Thanks a lot

Seb.

[Narayanasamy Panneer Selvam]

Hi Sébastien, 

 

 

Greetings from Syncfusion support. 

  

 

We cannot use nested ng-template in angular. But we can achieve your requirement with ng-container by using ng-template reference in ngTemplateOutlet attribute. Please refer the code example is given below, 

  

 Code example: 

<ejs-splitter> 

    <e-panes> 

        <e-pane size='50%' min='60px'> 

            <ng-template #content> 

                <ng-container *ngTemplateOutlet="nestedContent"></ng-container> 

            </ng-template> 

        </e-pane> 

    </e-panes> 

</ejs-splitter> 

 

<ng-template #nestedContent> 

        <ejs-splitter> 

            <e-panes> 

                <e-pane size='25%' min='60px'> 

                    <ng-template #content> 

                        <div>Left pane</div> 

                    </ng-template> 

                </e-pane> 

                <e-pane size='50%' min='60px'> 

                    <ng-template #content> 

                        <div>Center pane</div> 

                    </ng-template> 

                </e-pane> 

        </ejs-splitter> 

</ng-template> 

 

 

For your convenience we have prepared a sample. please find it in the below link,
Sample: https://stackblitz.com/edit/angular-eul97v-xbrzfa?file=app.component.html 

 

 To know more about nested ng-template please refer in the below link, 

Reference: https://stackoverflow.com/a/47555966/10650418 

 

 

Regards,  

Narayanasamy P.  

[Sébastien GUISSE]

Thanks a lot for your quick response and for the stackblitz sample code

It resolve my problem

:-)

[Narayanasamy Panneer Selvam]

Hi Sébastien, 

 

You are welcome.

 

We're happy to hear that the reported issue is resolved at your end.😊 

 

Regards,  

Narayanasamy P.