Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Dashboard Layout / How To / Initialize DashboardLayout using SystemJS
Search results

Initialize DashboardLayout using SystemJS in Angular Dashboard Layout component

21 Dec 2022 / 4 minutes to read

DashboardLayout can also be initialized using SystemJS as follows.

Installation and configuration

  • To setup basic Angular sample use the following commands.
Copied to clipboard
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information, refer to Angular sample setup.

  • Install Syncfusion DashboardLayout package using below command.
Copied to clipboard
npm install @syncfusion/ej2-angular-layouts --save

The above package installs Dashboard Layout component dependencies which are required to render the component in an Angular environment.

  • Syncfusion ej2-angular-layouts packages need to be mapped in systemjs.config.js configuration file.
Copied to clipboard
/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/',
  "syncfusion:": "node_modules/@syncfusion/", // syncfusion alias

},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  'app': 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // syncfusion bundles
  "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
  "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
  "@syncfusion/ej2-angular-layouts": "syncfusion:ej2-angular-layouts/dist/ej2-angular-layouts.umd.min.js",
  "@syncfusion/ej2-angular-base": "syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js",

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
  });
})(this);

Adding style sheet to the application

To render the DashboardLayout component, import the DashboardLayout and its dependent component’s styles as given below in [src/styles.css].

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

Note: To refer the combined component styles, use Syncfusion CRG (Custom Resource Generator) in your application.

Add DashboardLayout to the application

You can render the DashboardLayout component by adding the panels property as the attribute to the HTML element directly. Add the HTML div element with panel definition for DashboardLayout into your app.template.html file.

[src/app/app.template.html]

Copied to clipboard
<div class="control-section">
<ejs-dashboardlayout id='defaultLayout' [columns]="5" #defaultLayout [cellSpacing]='cellSpacing'>
    <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">0</div>
        </div>
    </div>
    <div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">1</div>
        </div>
    </div>
    <div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">2</div>
        </div>
    </div>
    <div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">3</div>
        </div>
    </div>
    <div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">4</div>
        </div>
    </div>
    <div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">5</div>
        </div>
    </div>
    <div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">6</div>
        </div>
    </div>
    <div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
        <span id="close" class="e-template-icon e-clear-icon"></span>
        <div class="e-panel-container">
            <div class="text-align">7</div>
        </div>
    </div>
</ejs-dashboardlayout>
</div>

Now, modify the templateUrl in app.component.ts file to render DashboardLayout component.

[src/app/app.component.ts]

Copied to clipboard
import { Component } from '@angular/core';

@Component({
  selector: 'app-container',
  styleUrls: ['default-style.css'],
  templateUrl: 'app.template.html'
})

export class AppComponent {
}
  • Import DashboardLayout module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-layouts.
Copied to clipboard
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { AppComponent }  from './app.component';

@NgModule({
  //declaration of ej2-angular-layouts module into NgModule
  imports:      [ BrowserModule, DashboardLayoutModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Run the application

Now, use the npm start command to run the application in the browser.

Copied to clipboard
npm start

The following example shows a basic DashboardLayout by adding the panels property directly into the HTML element.

Copied to clipboard
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-root',
styleUrls: ['app/default-style.css'],
templateUrl: 'app/app.template.html',
encapsulation: ViewEncapsulation.None
})

export class AppComponent {
public cellSpacing: number[] = [10, 10];
}
Copied to clipboard
<div class="control-section">
    <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]="5" [cellSpacing]='cellSpacing'>
        <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">0</div>
            </div>
        </div>
        <div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">1</div>
            </div>
        </div>
        <div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">2</div>
            </div>
        </div>
        <div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">3</div>
            </div>
        </div>
        <div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">4</div>
            </div>
        </div>
        <div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">5</div>
            </div>
        </div>
        <div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">6</div>
            </div>
        </div>
        <div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
            <span id="close" class="e-template-icon e-clear-icon"></span>
            <div class="e-panel-container">
                <div class="text-align">7</div>
            </div>
        </div>
    </ejs-dashboardlayout>
</div>
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.control-section {
    margin: 0 auto;
    width: 500px;
}

#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}

.text-align {
    line-height: 90px;
}

You can refer to our Angular Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our Angular Dashboard Layout example to knows how to present and manipulate data.

Dashboard Layout / Accessibility
DataManager / Getting Started