# How to add new set of component with a different provider

WebMAP frontend structure allows you to change easily your components provider for example: `Kendo ui`, `Primeng`, `Syncfusion` and more. On this guideline we are going to create a new `Syncfusion` component.

## Getting Started

The following section explains the steps required to create a simple `Syncfusion` Calendar component, in most cases, providers installation is the same, just a few variables. Its important to check their proper documentation.

## Creating module

In order to keep good coding practices each time that we implement a new provider also create a new module.

```bash
ng generate module Syncfusion
```

New module should look like this:

```typescript
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MonthCalendarComponent } from './monthcalendar/monthcalendar.component';
import { BrowserModule } from '@angular/platform-browser';
import { CalendarModule } from '@syncfusion/ej2-ng-calendars';
@NgModule({
  declarations: [MonthCalendarComponent],
  exports : [MonthCalendarComponent],
  imports: [
    CommonModule,
    BrowserModule,
    CalendarModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SyncfusionModule { }
```

Its important to add schemas on the @NgModule

```typescript
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
```

## Index file

Each Module has its own index file which exports module indeed and the components created `index.ts`

```typescript
export { MonthCalendarComponent } from './monthcalendar/monthcalendar.component';
export { SyncfusionModule } from './syncfusion.module';
```

`Syncfusion` `index.ts` should be exported on the global `index.ts` file on components folder

```typescript
export * from './baseComponents';
export * from './kendoUI';
export * from './syncfusion';
```

## Samples

If we want to implement this new module on Samples we have to import `Syncfusion` module on `app.module.ts` like this:

```typescript
import { SyncfusionModule } from '@mobilize/winforms-components';
```

Then add it to the imports inside `@NgModule`.

```typescript
  imports: [
    BrowserModule,
    WebMAPModule,
    AppRoutingModule,
    WebMAPKendoModule,
    SyncfusionModule
  ],
```

## Packages installation and configuration

Every single component has its own dependencies which are required to render the component in an Angular environment. In order to Install `Syncfusion` Calendar packages use below command.

```bash
    npm install @syncfusion/ej2-ng-calendars --save
```

## Styles

Themes are shipped as individual and combined CSS files. You can refer files on the same component repository’s style folder or in the global scss file. `Syncfusion` allows you to choose between this:

* Google’s Material
* Microsoft Office’s Fabric
* Bootstrap
* High Contrast

## Referring All components SCSS

```bash
@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
```

## Referring Individual components SCSS

```bash
@import "../node_modules/@syncfusion/ej2-ng-calendars/styles/material.css";
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/component-maintenance/how-to-add-new-set-of-component-with-a-different-provider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.