How to get started easily with Syncfusion Angular 8 Splitter?

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 8 application and how to enable its commonly used features.

Prerequisites

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

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor.

Installation and application creation

• Install Angular cli 8 using following command.

     npm install -g @angular/cli@8.1.1
   
  

• Create an Angular 8 application using Angular cli.

        ng new angular8-app
        cd angular8-app
  

• Serve the Angular 8 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 8 version.

Integration of Angular Splitter

• After running the Angular 8 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.

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 href="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>
  

The following screenshot illustrates this.

Summary

     Refer to our documentation and online samples for more features. If you have any queries, 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!