How to get started easily with Syncfusion Angular 9 Dashboard Layout?

How to get started easily with Syncfusion Angular 9 Dashboard Layout

The Essential JS 2 Angular_DashboardLayout is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard, and they can be added programmatically or dynamically at run time. The panels hold UI components and allows resizing, reordering, drag-and-drop, and adding-removing of panels. This allows users to easily place components at the desired position within this layout.

This KB article explains how to easily integrate Syncfusion Angular Dashboard Layout in an Angular 9 application with its commonly used features.

Prerequisites

Before starting, you need the following items to create an Angular Dashboard Layout in Angular 9 application:

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

Installation and application creation

1. Install Angular cli 9 using following command.
   

   npm install -g @angular/cli@9.0.2

2. Create an Angular 9 application using Angular cli.
   

   ng new angular9-app

   cd angular9-app

3. Serve the Angular 9 application using the following command.
   

   ng serve

Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 9 version.

Integration of Angular Dashboard Layout

1. After running the Angular 9 application successfully, configure the Angular Dashboard Layout in this application. Install Angular Dashboard Layout and EJ2 package using the following command. The --save command instructs the NPM to include a layout package that contains the Dashboard Layout control inside the dependencies section of the package.json.
   

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

   npm install @syncfusion/ej2 --save 

2. Import DashboardLayoutModule from installed package in app/app.module.ts.

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
        import { AppComponent } from './app.component';
    
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            DashboardLayoutModule
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
   

3. Refer to the CSS file for Angular Dashboard Layout in style.CSS     

        @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
        @import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
   

4. Add the Angular Dashboard Layout component in app.component.html.

        <ejs-dashboardlayout></ejs-dashboardlayout>
   

5. Now, define the columns, cellSpacing, and panels for Dashboard Layout in app.component.ts.

   import { Component, ViewEncapsulation, Inject, ViewChild } from "@angular/core";
   import { DashboardLayoutComponent } from "@syncfusion/ej2-angular-layouts";
    
   @Component({
     selector: "app-root",
     styleUrls: ["app.component.css"],
     templateUrl: "app.component.html",
     encapsulation: ViewEncapsulation.None
   })
   export class AppComponent {
     constructor() {}
     public cellSpacing: number[] = [20, 20];
     public columns: number = 5;
     public panels: any = [
       { row: 0, col: 0, content: '<div class="content">1</div>' },
       { row: 0, col: 1, content: '<div class="content">2</div>' },
       { row: 0, col: 2, content: '<div class="content">3</div>' },
       { row: 1, col: 0, content: '<div class="content">4</div>' },
       { row: 1, col: 1, content: '<div class="content">5</div>' },
       { row: 1, col: 2, content: '<div class="content">6</div>' }
     ];
   }
    
   

6. After defining these data, define Dashboard Layout’s columns, cellSpacing, and panels in app.component.html.

   <div class=”control-section”>     
      <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels'>
        </ejs-dashboardlayout>
   </div>
   

You can also use other functionalities such as allowResizing and cellAspectRatio.

7. Now, serve the application using the following command.
   

   ng serve

After all the files have been compiled successfully, it will serve the site at localhost:4200.

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!