Comment on page
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.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.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 ]
Each Module has its own index file which exports module indeed and the components created
index.tsexport { MonthCalendarComponent } from './monthcalendar/monthcalendar.component';
export { SyncfusionModule } from './syncfusion.module';
Syncfusion index.ts should be exported on the global index.ts file on components folderexport * from './baseComponents';
export * from './kendoUI';
export * from './syncfusion';
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
],
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
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
@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
@import "../node_modules/@syncfusion/ej2-ng-calendars/styles/material.css";
Last modified 1yr ago