Syncfusion EJ2 Angular

https://ej2.syncfusion.com/angular/documentation/
Admin
Syncfusion EJ2 Angular is a comprehensive suite of modern, TypeScript-based Angular UI components...
Tokens:9,403,153
Snippets:82,608
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Clone and setup Angular project

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/initialize-filemanager-using-systemjs

Use these commands to clone the Angular quickstart repository and install dependencies.

```bash
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
```

--------------------------------

### Silent Installation Example

Source: https://ej2.syncfusion.com/angular/documentation/installation-and-upgrade/installation-using-offline-installer

A concrete example of the silent installation command using specific file paths and configuration flags.

```bash
 "D:\Temp\syncfusionejs2_20.2.0.36.exe" /Install silent /UNLOCKKEY:"your-unlock-key" /log "C:\Temp\EssentialStudioPlatform.log" /InstallPath:"C:\Syncfusion\20.2.0.36" /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true
```

--------------------------------

### Complete example setup for AppComponent

Source: https://ej2.syncfusion.com/angular/documentation/grid/integrate-chart-in-grid

This snippet shows the initial setup for the AppComponent, including imports and class properties required for chart integration.

```typescript
import { salesDatas } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ContextMenuClickEventArgs, ContextMenuItem, ContextMenuService, GridComponent, GridModule, IGrid } from '@syncfusion/ej2-angular-grids';
import { ChartModel } from '@syncfusion/ej2-charts';
import { CategorySeries, ChartChanges, ChartPopupArgs, GridChart } from '@syncfusion/ej2-grid-chart';

@Component({
  imports: [ GridModule],
  providers: [ContextMenuService],
  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.component.html',
})

export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: Object[];
  public gridChart?: GridChart;
  public contextMenuItems?: ContextMenuItem[];
  public selectionSettings?: Object;
```

--------------------------------

### Project Setup and Syncfusion Component Installation

Source: https://ej2.syncfusion.com/angular/documentation/frameworks-and-feature/lazy-loading-support

Create a new Angular project with routing and install necessary Syncfusion component packages.

```bash
ng new ngmodule-lazy-demo --routing --style=css
cd ngmodule-lazy-demo
npm install @syncfusion/ej2-angular-grids @syncfusion/ej2-angular-dropdowns
npm install @syncfusion/ej2-angular-buttons
```

--------------------------------

### Run GraphQL Server

Source: https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/graphql-adaptor

Commands to install dependencies and start the development server.

```bash
npm install
npm run dev
```

--------------------------------

### Basic Signature Component Setup in Angular

Source: https://ej2.syncfusion.com/angular/documentation/signature/getting-started

This example demonstrates the basic setup for a Signature component within an Angular application. Ensure necessary modules are imported.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule,SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Sign here</h4>
            <!-- To Render Signature. -->
            <canvas ejs-signature #signature id="signature"></canvas></div>`
})
export class AppComponent {}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Complete Angular AutoComplete Setup

Source: https://ej2.syncfusion.com/angular/documentation/auto-complete/getting-started

This example shows the full setup for an Angular application including the AutoComplete component with a data source, demonstrating module imports and standalone component configuration.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the AutoComplete component with dataSource
    template: `<ejs-autocomplete id='atcelement' [dataSource]='sportsData'></ejs-autocomplete>`
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics'];
}



```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

```

--------------------------------

### Complete Sidebar Component Setup

Source: https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started

This example shows a full setup for the Sidebar component, including necessary imports, template, and basic styling. The `onCreated` method ensures the sidebar is visible after initialization.

```typescript
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'



import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [SidebarModule, ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <ejs-sidebar id="default-sidebar" #sidebar (created)="onCreated($event)" style="visibility: hidden">
                    <div class="title"> Sidebar content</div>
                </ejs-sidebar>
                <div>
                    <div class="title">Main content</div>
                    <div class="sub-title">
                        Content goes here.
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }
}
```

```typescript
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Basic Button component setup

Source: https://ej2.syncfusion.com/angular/documentation/button/getting-started

This example demonstrates the complete setup for a basic Button component in an Angular application, including component definition and main entry point.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
        
        ButtonModule
    ],

standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To render Button. -->
               <button ejs-button>Button</button></div>`
})

export class AppComponent { }


```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

```

--------------------------------

### Complete Angular Component Setup with DropDownList

Source: https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started

This example shows a complete Angular component setup including necessary module imports for standalone components, data binding, and a placeholder for the DropDownList.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the DropDownList component with dataSource
    template: `<ejs-dropdownlist id='ddlelement' [dataSource]='data' placeholder = 'Select a game'></ejs-dropdownlist>`
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public data: string[] = ['Snooker', 'Tennis', 'Cricket', 'Football', 'Rugby'];
}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Start the application

Source: https://ej2.syncfusion.com/angular/documentation/accordion

Use this command from the project root to start the development server. The application will be available at http://localhost:4200 by default.

```bash
  npm start
```

--------------------------------

### getStartEndHours

Source: https://ej2.syncfusion.com/angular/documentation/api/schedule/staticfunctions

Method to get start and end hours.

```APIDOC
## getStartEndHours

### Description
Method to get start and end hours.

### Parameters
- **date** (Date) - Required - Accepts the date object
- **startHour** (Date) - Required - Accepts the start hour date object
- **endHour** (Date) - Required - Accepts the end hour date object

### Returns
- **Record**
```

--------------------------------

### Clone and run the complete sample repository

Source: https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-backends/graphql-hotchocolate-server

Clone the GitHub repository and start the backend server to run the complete sample.

```bash
git clone https://github.com/SyncfusionExamples/ej2-angular-grid-samples/tree/master/connecting-to-backends/syncfusion-angular-grid-with-graphql-hotchocolate-server
cd syncfusion-angular-grid-with-graphql-hotchocolate-server
dotnet run --project AngularApp1.Server
```

--------------------------------

### beforePrint

Source: https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel

Triggers before the print functionality gets started.

```APIDOC
## beforePrint

### Description
Triggers before the print functionality gets started.

### Event
beforePrint

### Arguments
EmitType<IPrintEventArgs>
```

--------------------------------

### Configure Grid Toolbar and Application Setup

Source: https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar

This example demonstrates setting up the Grid component with toolbar items and edit settings in the component file, alongside the main application bootstrap file.

```typescript
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { EditService, EditSettingsModel, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule ],
    providers: [ToolbarService, EditService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='270px' [toolbar]='toolbar' [editSettings]="editSettings">
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbar?: ToolbarItems[];
    public editSettings?: EditSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.editSettings = {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
        };
        this.toolbar = [
            'Add',
            'Edit',
            'Delete',
            'Update',
            'Cancel',
        ];
    } 
}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### GridComponent VirtualScrollService Setup

Source: https://ej2.syncfusion.com/angular/documentation/api/grid/index-default

Example of configuring the GridComponent with VirtualScrollService.

```typescript
import { Component, OnInit } from '@angular/core';
import { orderData } from './data';
import { GridComponent,VirtualScrollService } from '@syncfusion/ej2-angular-grids';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers:[VirtualScrollService]
})
export class AppComponent implements OnInit {
    public data: Object[];
    public ngOnInit(): void {
        this.data = orderData;
    }
}
```

--------------------------------

### Configure main.py Entry Point

Source: https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-backends/fastapi-server

Sets up the FastAPI application, enables CORS for development, and registers the products router.

```python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

# Import from routers folder
from routers.products import router as products_router

app = FastAPI(title="Products API")

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Register router
app.include_router(
    products_router,
    prefix="/products",
    tags=["products"]
)
```

--------------------------------

### Basic Smithchart Component Setup

Source: https://ej2.syncfusion.com/angular/documentation/smithchart/getting-started

This example demonstrates the basic setup of the Smithchart component in an Angular application, including necessary imports and module declarations.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SmithchartModule, TooltipRenderService, SmithchartLegendService } from '@syncfusion/ej2-angular-charts'



import { Component } from '@angular/core';

@Component({
imports: [
         SmithchartModule
    ],

providers: [TooltipRenderService, SmithchartLegendService],
standalone: true,
    selector: 'app-container',
    // specifies the template string for the Smithchart component
    template: `<ejs-smithchart id="smithchart-container"  height='350px'></ejs-smithchart>`
})
export class AppComponent { 

}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Run Application

Source: https://ej2.syncfusion.com/angular/documentation/block-editor

Command to start the development server and open the application in the browser.

```bash
ng serve --open
```

--------------------------------

### getDoubleRange

Source: https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DSeries

Gets a range of values between the specified start and end points.

```APIDOC
## getDoubleRange(start: number, end: number)

### Description
Gets a range of values between the specified start and end points. Returns a Chart3DRangeValues object.

### Parameters
- **start** (number) - Required - The starting point of the range.
- **end** (number) - Required - The ending point of the range.

### Returns
- **Chart3DRangeValues**
```

--------------------------------

### Get Checked Nodes

Source: https://ej2.syncfusion.com/angular/documentation/treeview/ej1-api-migration

Examples for retrieving checked nodes from the TreeView.

```html
<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>
```

```javascript
var treeObj = $("#tree").data("ejTreeView");
treeObj.getCheckedNodes();
```

```html
<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>
```

```typescript
@ViewChild("tree") tree: TreeViewComponent;
var check = tree.getAllCheckedNodes();
var i = 0;
var checkedNodes = [];
while (i < check.length) {
```

--------------------------------

### Basic ContextMenu Implementation

Source: https://ej2.syncfusion.com/angular/documentation/api/context-menu/index-default

A simple example showing how to define a target element and initialize the ContextMenu component.

```html
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ejs-contextmenu target='#target' [items]='menuItems'></ejs-contextmenu>
```

--------------------------------

### Initialize Node.js and install packages

Source: https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-backends/express-js-server

Commands to initialize the Node.js project and install necessary dependencies and dev dependencies.

```bash
npm init -y
npm install express cors
npm install -D typescript ts-node nodemon @types/express @types/cors @types/node
```

--------------------------------

### Complete CheckBox component setup

Source: https://ej2.syncfusion.com/angular/documentation/check-box/getting-started

This example shows the complete setup for rendering a basic CheckBox component in an Angular application, including necessary imports and bootstrapping.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
        
        CheckBoxModule
    ],

standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render CheckBox. -->
               <ejs-checkbox label="Default"></ejs-checkbox>
               </div>`
})

export class AppComponent { }
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Start Node.js application

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/custom-file-provider

Run the application using the node command pointing to the entry point file.

```bash
node index.js
```

--------------------------------

### Delete Shape in ImageEditorComponent

Source: https://ej2.syncfusion.com/angular/documentation/api/image-editor/index-default

Example setup for deleting shapes within the ImageEditorComponent.

```html
<div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>
```

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';
```

--------------------------------

### Navigate to project directory

Source: https://ej2.syncfusion.com/angular/documentation/data/getting-started

Command to enter the newly created project folder.

```bash
cd data-app
```

--------------------------------

### Implement ProgressButton start and stop methods

Source: https://ej2.syncfusion.com/angular/documentation/progress-button/spinner-and-progress

This example shows the AppComponent configuration for a ProgressButton that toggles between download, pause, and resume states using the start and stop methods.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons'



import { Component, ViewChild } from '@angular/core';
import { ProgressButtonComponent } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        
        ProgressButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <button #progressBtn ejs-progressbutton [content]='content' [enableProgress]='true' [duration]='4000' (end)='end()' [iconCss]='iconCss' cssClass='e-hide-spinner' (click)="btnClick()"></button></div>`
})

export class AppComponent {
    @ViewChild('progressBtn')
    public progressBtn : ProgressButtonComponent | any;
    public content: string = 'Download';
    public iconCss: string = 'e-btn-sb-icon e-download';

    public end(): void {
        this.content = 'Download';
        this.iconCss = 'e-btn-sb-icon e-download';
    }

    public btnClick(): void {
        if(this.content === 'Download') {
            this.content = 'Pause';
            this.iconCss = 'e-btn-sb-icon e-pause';
        }
        else if(this.content === 'Pause') {
            this.content = 'Resume';
            this.iconCss = 'e-btn-sb-icon e-play';
            this.progressBtn.stop();
        }
        else if(this.content === 'Resume') {
            this.content = 'Pause';
            this.iconCss = 'e-btn-sb-icon e-pause';
            this.progressBtn.start();
        }
    }
}
```

--------------------------------

### Basic Image Editor component setup

Source: https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started

This example demonstrates the complete setup for rendering a basic Image Editor component in an Angular application, including imports and template.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ImageEditorModule } from '@syncfusion/ej2-angular-image-editor'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
        
        ImageEditorModule
    ],

standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
              <!-- To render Image Editor. -->
              <div id="wrapperDiv" style="width:550px;height:350px;">
                <ejs-imageeditor></ejs-imageeditor>
              </div>
              </div>`
})

export class AppComponent { 

}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Project Setup Commands

Source: https://ej2.syncfusion.com/angular/documentation/frameworks-and-feature/lazy-loading-support

Use these commands to create a new Angular standalone project and install necessary Syncfusion UI component packages.

```bash
ng new standalone-lazy-demo --routing --standalone --style=css
cd standalone-lazy-demo
npm install @syncfusion/ej2-angular-grids @syncfusion/ej2-angular-dropdowns
npm install @syncfusion/ej2-angular-buttons
```

--------------------------------

### Build the backend service

Source: https://ej2.syncfusion.com/angular/documentation/gantt/signalr

Use the .NET CLI to build the backend service.

```bash
dotnet build
```

--------------------------------

### Basic Heatmap component setup

Source: https://ej2.syncfusion.com/angular/documentation/heatmap-chart/getting-started

This example demonstrates the minimal setup for rendering a basic Heatmap component in an Angular application, including necessary imports and component configuration.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'



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

@Component({
imports: [
         HeatMapModule
    ],
standalone: true,
    selector: 'my-app',
    // specifies the template string for the HeatMap component
    template: `<ejs-heatmap id="heatmap-container"></ejs-heatmap>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {

}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

--------------------------------

### Configure App and Main Entry Points

Source: https://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started

Sets up the main application component with the DateRangePicker and configures the application bootstrap process.

```typescript
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars'



import { Component } from '@angular/core';

@Component({
imports: [
        
        FormsModule,
        DateRangePickerModule
    ],

standalone: true,
    selector: 'app-root',
    template: `<ejs-daterangepicker></ejs-daterangepicker>`
})
export class AppComponent {
    constructor() {
    }
}



```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

```

--------------------------------

### Initialize Django project and application

Source: https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-backends/django-server-custom-binding

Commands to create the Django project structure and the library application module.

```bash
django-admin startproject django_server
   python manage.py startapp library
```

--------------------------------

### Get Column Fieldnames

Source: https://ej2.syncfusion.com/angular/documentation/grid/ej1-api-migration

Examples of retrieving all column field names in EJ1 and EJ2.

```typescript
export class AppComponent {
@ViewChild('grid') Grid: EJComponents<any, any>;
ngAfterViewInit(){
this.Grid.widget.getColumnFieldNames();
}
}
```

```typescript
@ViewChild('grid') Grid: GridComponent;
this.Grid.getColumnFieldNames()
```

--------------------------------

### Get Column By Index

Source: https://ej2.syncfusion.com/angular/documentation/grid/ej1-api-migration

Examples of retrieving a column object by its index in EJ1 and EJ2.

```typescript
export class AppComponent {
@ViewChild('grid') Grid: EJComponents<any, any>;
ngAfterViewInit(){
this.Grid.widget.getColumnByIndex(1);
}
}
```

```typescript
@ViewChild('grid') Grid: GridComponent;
this.Grid.getColumnByIndex(1)
```

--------------------------------

### Examples of Adding Components

Source: https://ej2.syncfusion.com/angular/documentation/common/syncfusion-cli

Commands to add various Syncfusion components to an existing project.

```bash
sf add grid
sf add chart
sf add scheduler
sf add gantt
sf add filemanager
sf add diagram
sf add rich-text-editor
sf add pdf-viewer
sf add docx-editor
sf add spreadsheet-editor
```

--------------------------------

### Install Theme via NPM

Source: https://ej2.syncfusion.com/angular/documentation/appearance/overview

Example of importing a specific theme CSS file.

```css
@import "@syncfusion/ej2-material3-theme/styles/grid/index.css";
```

--------------------------------

### Create Folder Response Example

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/custom-file-provider

Example response structure for a successful folder creation operation.

```json
{
    cwd: null,
    files: [
        0:{
            dateCreated: "2023-09-14T10:52:25.000Z",
            dateModified: "2023-09-14T10:52:25.000Z",
            filterPath: null,
            hasChild: false,
            isFile: false,
            name: "New",
            size: 0,
            type: "Directory"
        }
    ],
    details: null,
    error: null
}
```

--------------------------------

### Default Timeline Component Setup

Source: https://ej2.syncfusion.com/angular/documentation/timeline/getting-started

This example demonstrates the basic setup for a default Timeline component in an Angular application, including component definition, HTML template, and main application bootstrapping.

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TimelineModule, TimelineAllModule } from '@syncfusion/ej2-angular-layouts'
import { Component } from '@angular/core';

@Component({
    imports: [TimelineModule, TimelineAllModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {

}
```

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
```

```html
<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
        <e-items>
            <e-item></e-item>
            <e-item></e-item>
            <e-item></e-item>
            <e-item></e-item>
        </e-items>
    </ejs-timeline>
</div>
```
Tokens:
Raw