### Install Dependencies and Run Server

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

Install necessary packages and start the GraphQL server to host your API.

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

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

### Default Timeline Component Setup

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

This example demonstrates the basic setup for a default Timeline component, including necessary imports and component definition.

```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>

```

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

### 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));
```

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

### 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 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 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));
```

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

### Complete Mention Component Setup in Angular

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

This example demonstrates a complete setup for the Mention component within an Angular application, including necessary imports and module configurations for standalone components.

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



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

@Component({
imports: [
        FormsModule, ReactiveFormsModule, MentionModule
    ],


standalone: true,
    selector: 'app-root',
    // Specifies the template string for the Mention component
    template: `
    <label id="comment" >Comments</label>
    <!--Element which is the Mention component's target to list the suggestions-->
    <div id="mentionElement" placeholder = "Type @ and tag user"></div>
    <ejs-mention [dataSource]='userData' [target]='mentionTarget'></ejs-mention>`,
    
})
export class AppComponent {
    constructor() {
    }
    // Defines the array of data.
    public userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    // Defines the target in which the mention component is rendered.
    public mentionTarget:string = "#mentionElement";
}




```

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

```

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

### Clone Physical File System Provider Example

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/file-system-provider

Clone the ej2-aspcore-file-provider repository to get started with the physical file system provider. Navigate into the cloned directory to proceed with setup.

```bash
git clone https://github.com/SyncfusionExamples/ej2-aspcore-file-provider  ej2-aspcore-file-provider

cd ej2-aspcore-file-provider
```

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

### Set up Virtual Environment and Install Packages

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

Create and activate a Python virtual environment, then install necessary packages for Django REST Framework and database connectivity.

```bash
python -m venv .venv
.venv\Scripts\activate   # Mac/Linux: source .venv/bin/activate
```

```bash
pip install django djangorestframework django-filter django-cors-headers mssql-django pyodbc
```

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

### Clone SharePoint File Provider Example

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/file-system-provider

Clone the example repository to get started with the SharePoint file provider.

```bash
git clone https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider  sharepoint-aspcore-file-provider

cd sharepoint-aspcore-file-provider
```

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

### Navigate to the application directory

Source: https://ej2.syncfusion.com/angular/documentation/3d-chart

Change into the newly created application's directory to proceed with further setup.

```bash
cd syncfusion-angular-app
```

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

### Clone FTP File Provider Example

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/file-system-provider

Clone the example project for the FTP ASP.NET Core file provider to get started.

```bash
git clone https://github.com/SyncfusionExamples/ftp-aspcore-file-provider.git  ftp-aspcore-file-provider.git
```

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

### Clone Google Drive ASP.NET Core File Provider Repository

Source: https://ej2.syncfusion.com/angular/documentation/file-manager/file-system-provider

Clone the repository to get started with the Google Drive file system provider. Navigate into the cloned directory to proceed with setup.

```bash
git clone https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider  google-drive-aspcore-file-provider

cd google-drive-aspcore-file-provider
```

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

### Start Client Application

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

Navigate to the GridClient directory and run 'npm start' to launch the client application. Access the client in your browser at http://localhost:4200/.

```bash
cd GridClient
npm start
```

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

### Create GraphQL Server and Install Packages

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

Set up your Node.js GraphQL server and install necessary packages like express, express-graphql, and graphql.

```bash
npm install express express-graphql graphql --save
```

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

### Configure SpeechToText Button Settings in Angular

Source: https://ej2.syncfusion.com/angular/documentation/speech-to-text

Customize the button's text for 'Start Listening' and 'Stop Listening' states by configuring the `buttonSettings` property in the SpeechToText component. This example shows the TypeScript component setup.

```typescript
import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs, ButtonSettingsModel } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)" [buttonSettings]="buttonSettings"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    public buttonSettings: ButtonSettingsModel = {
        content: 'Start Listening',
        stopContent: 'Stop Listening'
     };
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
     }
 }
```

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

### Create Project Folder and Navigate

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

Create a new directory for your GraphQL server and navigate into it. Also, create a 'src' directory for source files.

```bash
mkdir GraphQLServer
cd GraphQLServer
mkdir src
cd src
```

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

### start

Source: https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range

Sets and gets the start value of the range in the circular gauge. Defaults to 0.

```APIDOC
## start

### Description
Sets and gets the start value of the range in the circular gauge.

### Type
`number`

### Default
`0`
```

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

### Start the GraphQL Server

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

Navigate to the server directory and run the npm start command to launch the GraphQL server. The server will be accessible at http://localhost:4000.

```bash
cd GridServer
npm start
```

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

### Install Syncfusion Packages

Source: https://ej2.syncfusion.com/angular/documentation/frameworks-and-feature/server-side-rendering

Install necessary Syncfusion packages for Angular components after setting up SSR. This example installs Grid and Buttons packages.

```bash
npm install @syncfusion/ej2-angular-grids @syncfusion/ej2-angular-buttons
```

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

### Start GraphQL Server

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

Navigate to the GraphQLServer directory and run 'npm start' to launch the server. The server will be accessible at http://localhost:4205/.

```bash
cd GraphQLServer
npm start
```

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

### Axis Start Angle

Source: https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axisdirective

Sets and gets the start angle of an axis in a circular gauge. Defaults to 200.

```APIDOC
## startAngle

### Description
Sets and gets the start angle of an axis in circular gauge.
Defaults to _200_

### Type
any
```

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

### Navigate to project directory

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

Navigate to the created project folder to begin development.

```bash
cd syncfusion-angular-multiselect
```

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

### Range Start Width Configuration

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

Sets and gets the width for the start of the range in the axis. The default value is 10.

```APIDOC
## startWidth number

### Description
Sets and gets the width for the start of the range in axis.

### Type
`number`

### Default Value
`10`
```

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

### Create FastAPI Server and Install Packages

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

Set up your FastAPI server and install necessary packages. This involves creating the main server file and adding dependencies.

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

app = FastAPI()

origins = ["*" ]

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

@app.get("/api/data")
def get_data():
    return {"message": "Hello World"}
```

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

### Axis Start Angle Directive

Source: https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axisDirective

Sets and gets the start angle of an axis in a circular gauge. Defaults to 200.

```APIDOC
## startAngle

### Description
Sets and gets the start angle of an axis in circular gauge.

### Default
_200_

### Type
any
```

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

### Example Usage

Source: https://ej2.syncfusion.com/angular/documentation/api/diagram/contextmenusettingsmodel

Demonstrates how to initialize the Diagram component with custom context menu settings.

```typescript
let diagram: Diagram = new Diagram({
  // ... other diagram properties
  contextMenuSettings: {
    show: true,
    items: [
      {
        text: 'delete',
        id: 'delete',
        target: '.e-diagramcontent',
        iconCss: 'e-copy'
      }
    ],
    showCustomMenuOnly: false
  }
  // ... other diagram properties
});
diagram.appendTo('#diagram');
```

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

### Install Skills Interactively (NPM)

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

Use this command to interactively install Syncfusion Angular UI component skills. The terminal will guide you through selecting skills, AI agents, and installation scope.

```bash
npx skills add syncfusion/angular-ui-components-skills
```

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

### 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));
```

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

### 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
```

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

### Port Initialization Example

Source: https://ej2.syncfusion.com/angular/documentation/api/diagram/port

Example demonstrating how to initialize a diagram with ports.

```APIDOC
## Port Initialization Example

```html
<div id='diagram'></div>
```

```javascript
  let port: PointPortModel[] =
[{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 } },];
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
}];
nodes.ports = port;
let diagram: Diagram = new Diagram({
...nodes : nodes,...
});
diagram.appendTo('#diagram');
```
```

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

### Example Usage

Source: https://ej2.syncfusion.com/angular/documentation/api/diagram/connector

Demonstrates how to create and configure connectors with annotations.

```APIDOC
## Example Usage

```html
<div id='diagram'></div>
```

```typescript
let connectors: ConnectorModel[] = [{ 
  id: 'connector', 
  type: 'Straight', 
  sourcePoint: { x: 500, y: 100 }, 
  targetPoint: { x: 600, y: 200 }, 
  annotations: [{ content: 'No', offset: 0, alignment: 'After' }]
}];

let diagram: Diagram = new Diagram({
  // ... other diagram properties
  connectors: connectors
});

diagram.appendTo('#diagram');
```
```

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

### Enable Slider Limits with Fixed Start Handle

Source: https://ej2.syncfusion.com/angular/documentation/api/slider/limitDataModel

Configure the slider to use limits and fix the start handle. This example shows how to enable limits and define start and end values for the range.

```html
<ejs-slider [value]="minValue" [min]="min" [max]="max" [type]="minType" [limits]="minRangeLimits"></ejs-slider>
```

```typescript
import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app/template.html",
    styleUrls:["index.css"],
})
export class AppComponent {
    public minType: SliderType = "MinRange";
    public min: number = 0;
    public max: number = 100;
    public minRangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40, startHandleFixed: true };
}
```

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

### Setting up the Flask server and installing required packages

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

Create a Flask server and install necessary packages like Flask and Flask-Cors. This sets up the basic environment for your API.

```bash
pip install Flask Flask-Cors
```

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

### Setting up the Express.js backend using Node.js

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

This section details the steps to create an Express server, configure TypeScript, generate sample data, and set up npm scripts for development.

```bash
npm install express body-parser typescript ts-node nodemon --save-dev
npm install @types/express @types/body-parser --save-dev
```

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

```typescript
import * as express from 'express';
import * as bodyParser from 'body-parser';

const app = express();
const port = 3000;

app.use(bodyParser.json());

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});
```

```typescript
interface Patient {
  ID: number;
  Name: string;
  Age: number;
  Gender: string;
  Diagnosis: string;
}
```

```typescript
const sampleData: Patient[] = [
  { ID: 1, Name: 'John Doe', Age: 30, Gender: 'Male', Diagnosis: 'Fever' },
  { ID: 2, Name: 'Jane Smith', Age: 25, Gender: 'Female', Diagnosis: 'Headache' },
  // ... more patient data
];
```

```json
{
  "name": "express-server",
  "version": "1.0.0",
  "scripts": {
    "start": "node dist/server.js",
    "build": "tsc",
    "dev": "nodemon --watch src --ext ts --exec ts-node src/server.ts"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "body-parser": "^1.19.0",
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.2"
  }
}
```

```typescript
import * as express from 'express';
import * as bodyParser from 'body-parser';
import { Patients } from './data'; // Assuming data.ts contains sample data

const app = express();
const port = 3000;

app.use(bodyParser.json());

// API Routes
app.get('/api/patients', (req, res) => {
  res.json(Patients);
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});
```

```typescript
import * as express from 'express';
import * as bodyParser from 'body-parser';
import { Patients } from './data';

const app = express();
const port = 3000;

app.use(bodyParser.json());

// API Routes
app.get('/api/patients', (req, res) => {
  // Implement filtering, sorting, paging logic here
  res.json(Patients);
});

app.post('/api/patients', (req, res) => {
  // Implement insert logic here
  res.status(201).send('Patient added successfully');
});

app.put('/api/patients/:id', (req, res) => {
  // Implement update logic here
  res.send('Patient updated successfully');
});

app.delete('/api/patients/:id', (req, res) => {
  // Implement delete logic here
  res.send('Patient deleted successfully');
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});
```

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

### Get Selected Chips - Angular ChipList

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

Retrieve the data of the currently selected chip(s). This example shows how to get the text of a single selected chip.

```html
<ejs-chiplist #ejchip id="chip" selection="Single" [selectedChips]="this.filterSelected">
        <e-chips>
            <e-chip text="Andrew"></e-chip>
            <e-chip text="Janet"></e-chip>  
            <e-chip text="Laura"></e-chip>
            <e-chip text="Margaret"></e-chip>
        </e-chips>
    </ejs-chiplist>
    <div class="btn"><button class="e-control e-btn" (click)="getSelectedChips()">Show</button></div>
```

```typescript
import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
    import { ChipList } from "@syncfusion/ej2-buttons";
    import { ChipListComponent } from "@syncfusion/ej2-angular-buttons";

    @Component({
        selector: "app-root",
        templateUrl: "app.component.html",
        styleUrls: ["app.component.css"],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        @ViewChild("ejchip")
        public ejchip: ChipListComponent;
        filterSelected = [2];
        public getSelectedChips = function(event: any): void {
        let name = this.ejchip.getSelectedChips().text;
        alert('Selected chip is ' +name);
    };
}
```

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

### Set up Apollo Server

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

Configure and start the Apollo Server with your schema and resolvers.

```javascript
const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema'); // Assuming schema.graphql is in the same directory
const resolvers = require('./resolvers'); // Assuming resolvers.js is in the same directory

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});
```

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

### 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));
```

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

### Complete Mention Component Example (Standalone)

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

A comprehensive example demonstrating the setup of a standalone Mention component, including data binding and template configuration.

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



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

@Component({
imports: [
        FormsModule, ReactiveFormsModule, MentionModule
    ],


standalone: true,
    selector: 'app-root',
    // Specifies the template string for the Mention component
    template: `
    <label id="comment" >Comments</label>
    <!--Element which is the Mention component's target to list the suggestions-->
    <div id="mentionElement" placeholder = "Type @ and tag user"></div>
    <ejs-mention [dataSource]='userData' [target]='mentionTarget'></ejs-mention>`,
    
})
export class AppComponent {
    constructor() {
    }
    // Defines the array of data.
    public userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    // Defines the target in which the mention component is rendered.
    public mentionTarget:string = "#mentionElement";
}
```

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

### Navigate to the project folder

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

Navigate to the created project folder.

```bash
cd syncfusion-angular-dropdownlist
```

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

### getTextSearchResultsOffset

Source: https://ej2.syncfusion.com/angular/documentation/api/document-editor/searchResults

Gets the start and end offset of searched text results.

```APIDOC
## getTextSearchResultsOffset

### Description
Get start and end offset of searched text results.

### Returns
`TextSearchResultInfo[]` - An array of text search result information objects.
```

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

### Start Next.js Server Application

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

Navigate to the 'next_js_server' directory and run 'npm run dev' to start the server.

```bash
cd next_js_server
npm run dev
```

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

### 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

### Description
Gets a range of values between the specified start and end points. This method returns a Chart3DRangeValues object representing the range of values between the given start and end points.

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

### Returns
- Chart3DRangeValues - An object representing the range of values.
```

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

### Create Project and Server Folders

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

Create the main project directory and a dedicated folder for the backend server, including subdirectories for organizing code.

```bash
mkdir ej2-angular-grid-with-express-js
cd ej2-angular-grid-with-express-js
mkdir server
cd server
mkdir src
cd src
mkdir controllers routes utils types
cd ..

```