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