We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 7 Splitter?

Platform: JavaScript - EJ 2 |
Control: Splitter |
Published Date: May 7, 2019 |
Last Revised Date: January 21, 2020

The Essential JS 2 Angular Splitter is a layout user interface (UI) that provides resizable, expandable, collapsible, and nested panes. It is useful for constructing different layouts in web apps such as Outlook style, Windows Explorer style, code editor UI, and more. The component can integrate other JavaScript UI controls inside its split panes. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular Splitter in Angular 7 application and how to enable its commonly used features.

Prerequisites

Before start, we need following items to create Angular Splitter in Angular 7 application

Installation and application creation

  • Install Angular cli 7 using following command.
    npm install -g @angular/cli@7.0.5
    

Angular 7 command page to get start with Syncfusion Tree Grid/Tree Table/Tree List control.

Note:

If you would like to follow and run the application in Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number.

 

npm install -g @angular/cli@<CLI VERSION>

  • Create an Angular 7 application using Angular cli.
          ng new angular7-app
          cd angular7-app
    
  • Serve the Angular 7 application using following command
           ng serve
    

Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 7 version.

 

Angular application startup page to get start with Syncfusion Tree Grid/Tree Table/Tree List control.

Integration of Angular Splitter

  • After running the Angular 7 application successfully, configure the Angular Splitter in this application. Install Angular Splitter and EJ2 package using following command. The --save command will instruct the NPM to include a layouts package inside the dependencies section of the package.json.
               npm install @syncfusion/ej2-angular-layouts --save 
               npm install @syncfusion/ej2 --save 
    

          

  • Import Splitter from installed package in app/app.module.ts.
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { SplitterModule } from '@syncfusion/ej2-angular-layouts';
    import { AppComponent } from './app.component';
     
     
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        SplitterModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { } 
    
  • You should refer the CSS file for Angular Splitter in style.CSS     
    @import "../node_modules/@syncfusion/ej2/material.css";
    
  • Add the Angular Splitter component in app.component.html.
               <ejs-splitter></ejs-splitter>
    
  • Now, define the split panes for the splitter as below.
    <ejs-splitter #horizontal height='210px' width='100%' >
       <e-panes>
            <e-pane size='25%'>
                <ng-template #content>
                        <div>Left pane</div>
                 </ng-template>
             </e-pane>
          <e-pane size='50%'>
                <ng-template #content>
                        <div>Middle pane</div>
                 </ng-template>
             </e-pane>
          <e-pane size='25%'>
                <ng-template #content>
                         <div>Right pane</div>
                 </ng-template>
             </e-pane>
         </e-panes>
     </ejs-splitter>
    

 

  • Now serve the application using following command.
     ng serve --open
    

Once all the files are compiled successfully. It will serve the site at localhost:4200

The following screenshot illustrates this.

Splitter default

Expand and Collapse in Splitter

  • The splitter allows to expand and collapse its split panes during the interaction with the panes. Expand collapse is enabled by using the paneSettings collapsible property.
    <ejs-splitter #horizontal height='320px' width='100%' >
       <e-panes>
            <e-pane size='50%' [collapsible]='true'>
                <ng-template #content>
                        <a href="https://www.syncfusion.com/ebooks/neuralnetworks" target="_blank">Neural Networks Using C# Succinctly</a>
                       <p>Neural networks are an exciting field of software development used to calculate outputs from input data. 
                  While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition, 
                  speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn 
                  how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of several values. 
                      </p>
                 </ng-template>
             </e-pane>
          <e-pane size='50%' [collapsible]='true'>
                <ng-template #content>
                         <a ref="https://www.syncfusion.com/ebooks/data_capture_and_extraction_with_c_sharp_succinctly" target="_blank">Data Capture and Extraction with C# Succinctly</a>
                        <p>Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more
                            engaging without relying entirely on specialized tools is an efficient way to improve productivity. 
                            In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time.
                            Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email 
                            is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world. 
                            If you can parse an email and extract data from it, companies that automate processes, e.g., helpdesk systems.
                     </p>
                 </ng-template>
             </e-pane>
         </e-panes>
     </ejs-splitter>
    

Splitter Expand-collapseThe following screenshot illustrates this.

 

Summary

In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check our Angular Splitter features from this page.

If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

ADD COMMENT
You must log in to leave a comment
Comments
Alain dEspaignet
Jan 20, 2020

Cannot get any content in any ej-pane working!
&lt;ng-template #content> &lt;div>Left pane&lt;strong> &lt;div>&lt;/strong> &lt;/ng-template>
fix those malformed divs

Reply
Indrajith Srinivasan [Syncfusion]
Jan 21, 2020

Hi Alain,

We have corrected the code blocks.

Regards, Indrajith

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile