How to create Angular 4 App using Syncfusion Components?
This Document explains how to create a Syncfusion sample in Angular 4
The Syncfusion Angular 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 tools.
Install the CLI application globally in your machine.
npm install -g @angular/cli@1.2.0
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 package
Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular syncfusion packages 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
Adding Grid module
After installing the package, the component modules are available to be configured in your application from the installed Syncfusion package. Syncfusion Angular package provides two different types of ngModules.
Refer to the 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 to app.component.ts as follows.
import { Component, OnInit } from '@angular/core'; import { data } from './datasource';
@Component({ selector: 'app-root', template: `<ejs-grid [dataSource]='data'> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column> </e-columns> </ejs-grid>` }) export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void { this.data = data; } }
|
Adding CSS reference
The following CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the 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.
GitHub sample link: https://github.com/SyncfusionExamples/Syncfusion-angular4-ui-components
