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

This article explains how to easily integrate Syncfusion Angular Dashboard Layout in an Angular 11 application with its commonly used features. 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.

Prerequisites

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

• Node.js (Latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. Install Angular cli 11 using following command.

npm install -g @angular/cli@11.2.3

Note:

If you want to follow and run the application in Angular 6, Angular 5, or Angular 4, you need to replace the CLI command version number with corresponding angular version number. 

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

2. Create an Angular 11 application using Angular CLI.

ng new angular11-app
cd angular11-app

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

ng serve --open

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

Integration of Angular Dashboard Layout

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

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

     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.

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.

export class AppComponent implements OnInit {

              public cellSpacing: number[] = [20, 20];

              public columns: number = 3;

 
              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.

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

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

ng serve --open

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

The following screenshot illustrates this:

Conclusion

We hope you enjoyed learning about how to get started with Angular 11 dashboardlayout.

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other 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, BoldDesk Support, or feedback portal. We are always happy to assist you!