Breadcrumb arrow Back to Code Examples

Syncfusion Angular 4 Ui Component

Sample date Updated on Feb 15, 2024
Browse Code Git logo Download
angular-components aot-compilation grid tree-shaking

Syncfusion Angular4 UI Components is a collection of modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular and touch friendly.

Setting up an angular project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/[email protected]

Create a new application

ng new angular-app

By default, it installs the CSS style base application. To setup with SCSS, pass --style=SCSS argument on create project.

Example code snippet.

ng new angular-app --style=scss

Navigate to the created project folder.

cd angular-app

Installing Syncfusion grid package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the angular syncfusion package from npm link.

Add @syncfusion/ej2-angular-grids package to the application.

npm install @syncfusion/ej2-angular-grids --save
(or)
npm i @syncfusion/ej2-angular-grids --save

Installing Syncfusion grid package with Custom Tagname

You can also change the tag name of Syncfusion Angular UI Controls.

Run the below command to add @syncfusion/ej2-angular-grids package to the application with the desired tag name custom.

SET tagName=custom && npm install @syncfusion/ej2-angular-grids

After executing the above command, the Syncfusion Angular UI component selector will be changed. For example, the tag name of <ejs-grid> will be changed into <custom-grid>.

Adding Grid module

After installing the package, the component modules are available to configure into your application from the installed syncfusion package. Syncfusion Angular package provides two different types of ngModules.

Refer to Ng-Module to learn about ngModules.

Refer to the following snippet to import the grid module in app.module.ts from the @syncfusion/ej2-angular-grids.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                GroupService]
})
export class AppModule { }

Adding Syncfusion component

Add the grid component snippet in app.component.ts as follows.

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

    public data: Object[];

    ngOnInit(): void {
        this.data = data;
    }
}

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using following code.

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Running the application in a Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Building the application

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Up arrow