Define a complex layout in full HTML

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.

3 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team September 9, 2019 12:18 PM UTC

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, 
 
 
Regards,  
Narayanasamy P.  



SG Sébastien GUISSE September 9, 2019 03:16 PM UTC

Thanks a lot for your quick response and for the stackblitz sample code
It resolve my problem
:-)


NP Narayanasamy Panneer Selvam Syncfusion Team September 10, 2019 04:34 AM UTC

Hi Sébastien, 
 
You are welcome.

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


Loader.
Up arrow icon