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 11 Splitter?

Platform: Angular - EJ 2 |
Control: 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 11 application and how to enable its commonly used features.

Prerequisites

 

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

Installation and application creation

 

  1. Install Angular cli 11 using following command.

 

npm install -g @angular/cli@11.2.3

 

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>

 

 

  1. Create an Angular 11 application using Angular cli.

 

ng new angular11-app

cd angular11-app

 

  1. Serve the Angular 11 application using following command.

 

ng serve --open 

 

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

Angular-app

 

Integration of Angular Splitter

 

  1. After running the Angular 11 application successfully, configure the Angular Splitter in this application. Install Angular Splitter and EJ2 package using following command. 

 

           npm install @syncfusion/ej2-angular-layouts --save 

           npm install @syncfusion/ej2 --save 

 

The --save command will instruct the NPM to include a layouts package inside the dependencies section of the package.json.

  1. 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 { }

 

  1. You should refer the CSS file for Angular Splitter in style.css.

 

@import "../node_modules/@syncfusion/ej2/material.css";

 

  1. Add the Angular Splitter component in app.component.html.

 

           <ejs-splitter></ejs-splitter>

 

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

 

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

 

Expand and Collapse in Splitter

 

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

 

The following screenshot illustrates this.

Splitter-expand

 

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!

 

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

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