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.

ng generate module Syncfusion

New module should look like this:

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

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

Index file

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

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

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:

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

Then add it to the imports inside @NgModule.

  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.

    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

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

Referring Individual components SCSS

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