How to get started easily with Syncfusion Angular 11 Splitter?

3 mins read

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

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>

Create an Angular 11 application using Angular cli.

ng new angular11-app

cd angular11-app

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

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.

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

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>

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!

Conclusion
I hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Splitter.

You can refer to our Angular Splitter feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Splitter example to understand how to create and manipulate data.

For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)