This article provides a step-by-step introduction to configure the Essential JS 1 and Essential JS 2 JavaScript controls in a same web page.
To work with the Essential JS 1 and the Essential JS 2 controls compatibility in JavaScript, the below mentioned System requirements are necessary,
npm install syncfusion-javascript @types/ej.web.all @types/jquery
<head>
element and add the HTML Button element inside <body>
element in the ~/src/index.html
for rendering Essential JS 1 Button control.<head>
....
....
<script src="../node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="../node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js" type="text/javascript"></script>
</head>
<body>
....
....
<div style="margin: 50px;">
<h2>Essential JS 1 Button</h2>
<!--Essential JS 1 button-->
<button id="button">Button</button>
</div>
</body>
Refer to this documentation to know more about Essential JS 1 dependencies.
styles.css
file.The compatibility styles of Essential JS 1 and Essential JS 2 must be added in the application to prevent the UI conflicts between the Essential JS 1 and Essential JS 2 controls.
Replace the style.css
file content with the below style references.
@import '../../node_modules/@syncfusion/ej2/styles/compatibility/material.css';
@import '../../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.compatibility.min';
types
compiler options in ~/tsconfig.json
file.{
"compilerOptions": {
"types": ["ej.web.all"]
}
}
~/src/app/app.ts
file./**
* Essential JS 1 Button
*/
/// <reference path="jquery.d.ts">
/// <reference path="ej.web.all.d.ts">
module ButtonComponent {
$(function () {
var sample = new ej.Button($("#button"));
});
}
npm start
The Essential JS 1 and Essential JS 2 Button control will be rendered in the same web page.