Skip to content

Commit fe3beae

Browse files
serhiipylypchuk1991serhiipylypchuk1991
committed
Add integration guides
1 parent 44c0f13 commit fe3beae

File tree

4 files changed

+1012
-32
lines changed

4 files changed

+1012
-32
lines changed

‎docs/integration/suite_and_angular.md‎

Lines changed: 270 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,276 @@
11
---
2-
sidebar_label: Code examples with Angular
3-
title: Code examples of DHTMLX Widgets with Angular
4-
description: You can explore how to use DHTMLX Widgets with Angular. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
2+
sidebar_label: Integration with Angular
3+
title: Integration DHTML Suite with Angular
4+
description: You can explore how to use DHTMLX Suite Widgets with Angular. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
55
---
66

7-
# Code examples of how to use Widgets with Angular
7+
# Integration Suite widgets with Angular
88

9-
![](../assets/integration/work_with_frameworks.png)
9+
:::tip
10+
You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://angular.io/docs).
11+
:::
1012

11-
DHTMLX Suite is compatible with Angular. We have prepared code examples of how to use DHTMLX widgets with Angular.
13+
DHTMLX Suite is compatible with **Angular**. For more information, refer to the corresponding example on GitHub: [DHTMLX Suite with Angular Demo](https://github.com/DHTMLX/angular-suite-demo).
1214

13-
- To check online samples, please refer to the corresponding [Example on Replit](https://replit.com/@dhtmlx/dhtmlx-suite-with-angular).
14-
- To download samples, please check our GitHub repository: [DHTMLX Widgets + Angular](https://github.com/DHTMLX/angular-suite-demo). The README.md file provides all the necessary information on how to run the app in the development mode.
15+
## Create new Angular project
16+
17+
:::info
18+
Before you start to create a new project, install [**Angular CLI**](https://angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
19+
:::
20+
21+
Step 1. Create a project and name it as ***my-angular-suite-app***:
22+
23+
~~~bash
24+
ng new my-angular-suite-app
25+
~~~
26+
27+
:::note
28+
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
29+
:::
30+
31+
The command above installs all the necessary tools, so you don't need to run any additional commands.
32+
33+
Step 2. Go to the project directory:
34+
35+
~~~bash
36+
cd my-angular-suite-app
37+
~~~
38+
39+
Step 3. Install dependencies and start the dev server. Use the [**yarn**](https://yarnpkg.com/) package manager:
40+
41+
~~~json
42+
yarn
43+
yarn start
44+
~~~
45+
46+
The app should run on a localhost (for instance `http://localhost:3000`).
47+
48+
## Install Suite sources
49+
50+
Install the DHTMLX Suite library to get access to Suite widgets. Refer to the following topic for more information: [**Installing DHTMLX Suite via npm or yarn**](../../#installing-trial-dhtmlx-suite-via-npm-or-yarn)
51+
52+
## Create Angular component
53+
54+
Now you can create Angular components (wrappers) based on Suite widgets. For each complex Suite widget you can create a separate file (for instance [***grid.component.ts***](https://github.com/DHTMLX/angular-suite-demo/blob/master/src/app/MainContainer/Content/LeftContent/Grid/grid.component.ts)) in the [***src/***](https://github.com/DHTMLX/angular-suite-demo/tree/master/src) directory.
55+
56+
### Import source files
57+
58+
Open the ***grid.component.ts*** file and import the corresponding Suite widget. Note that:
59+
60+
- if you use PRO version and install the Suite package from a local folder, the import paths look as follows:
61+
62+
~~~jsx title="grid.component.ts"
63+
import { SuiteWidgetName } from "dhx-suite-package"; // import { Grid, Pagination, ... } from "dhx-suite-package";
64+
import "dhx-suite-package/codebase/suite.css"; // import Suite styles
65+
~~~
66+
67+
Note that depending on the used package, the source files can be minified. In this case, make sure that you import the CSS file as ***suite.min.css***.
68+
69+
- if you use the trial version of Suite, the import paths look as follows:
70+
71+
~~~jsx title="grid.component.ts"
72+
import { SuiteWidgetName } from "@dhx/trial-suite"; // import { Grid, Pagination, ... } from "@dhx/trial-suite";
73+
import "@dhx/trial-suite/codebase/suite.min.css"; // import Suite styles
74+
~~~
75+
76+
In this guide you can find basic concepts on how to utilize the **trial** version of Suite widgets.
77+
78+
### Initialize Suite widget(s) within a container
79+
80+
To display a Suite widget on a page, you need to create a container and initialize a widget through the corresponding constructor:
81+
82+
~~~jsx {2,17,23,29-31} title="grid.component.ts"
83+
// import a Suite widget
84+
import { Grid } from "@dhx/trial-suite";
85+
// import Suite styles
86+
import "@dhx/trial-suite/codebase/suite.min.css";
87+
88+
import {
89+
Component,
90+
ElementRef,
91+
OnInit,
92+
OnDestroy,
93+
ViewChild
94+
} from "@angular/core";
95+
96+
@Component({
97+
selector: "app-grid",
98+
template: `<div class="component_container">
99+
<div #grid_container class="widget"></div>
100+
</div>`
101+
})
102+
103+
// create and export the Angular component
104+
export class GridComponent implements OnInit, OnDestroy {
105+
@ViewChild("grid_container", { static: true }) grid_container!: ElementRef;
106+
107+
private _grid_widget!: Grid;
108+
109+
ngOnInit() {
110+
// initialize a Suite widget
111+
this._grid_widget = new Grid(this.grid_container.nativeElement, {
112+
// configuration properties here
113+
});
114+
}
115+
116+
ngOnDestroy() {
117+
this._grid_widget?.destructor(); // destruct a Suite widget
118+
}
119+
}
120+
~~~
121+
122+
### Load data
123+
124+
To add data into a Suite widget, you need to provide a data set. You can create the [***app.data.ts***](https://github.com/DHTMLX/angular-suite-demo/blob/master/src/app/app.data.ts) file in the ***src/*** directory and add required data sets:
125+
126+
~~~jsx {2,27,29} title="app.data.ts"
127+
export function getData() {
128+
const gridData = [
129+
{
130+
time: new Date("Jan 28, 2021"),
131+
nights: 7,
132+
price: 68,
133+
contactPerson: "Yoshio Slater",
134+
contactEmail: "[email protected]"
135+
},
136+
{
137+
time: new Date("Apr 13, 2021")
138+
nights: 6,
139+
price: 66,
140+
contactPerson: "Christopher Kirk",
141+
contactEmail: "[email protected]"
142+
},
143+
{
144+
time: new Date("Jan 31, 2021"),
145+
nights: 15,
146+
price: 64,
147+
contactPerson: "Jana Meyers",
148+
contactEmail: "[email protected]"
149+
},
150+
// other data items
151+
];
152+
153+
const sidebarData = [ /* ... */ ];
154+
155+
return { gridData, sidebarData };
156+
}
157+
~~~
158+
159+
#### Specify data through the property
160+
161+
To load predefined data into a Suite widget, you need to perform the following steps:
162+
163+
1. Import predefined data
164+
2. Initialize the required data set
165+
3. Set the `data` property to the predefined data set within the Suite widget constructor
166+
167+
~~~jsx {1,4,27,30} title="grid.component.ts"
168+
import { Grid } from "@dhx/trial-suite";
169+
import "@dhx/trial-suite/codebase/suite.min.css";
170+
171+
import { getData } from "../../../app.data"; // 1. import predefined data
172+
173+
import {
174+
Component,
175+
ElementRef,
176+
OnInit,
177+
OnDestroy,
178+
ViewChild
179+
} from "@angular/core";
180+
181+
@Component({
182+
selector: "app-grid",
183+
template: `<div class="component_container">
184+
<div #grid_container class="widget"></div>
185+
</div>`
186+
})
187+
188+
export class GridComponent implements OnInit, OnDestroy {
189+
@ViewChild("grid_container", { static: true }) grid_container!: ElementRef;
190+
191+
private _grid_widget!: Grid;
192+
193+
ngOnInit() {
194+
const { gridData } = getData(); // 2. initialize the required data set
195+
// initialize a Suite widget with data
196+
this._grid_widget = new Grid(this.grid_container.nativeElement, {
197+
data: gridData, // 3. set the `data` property to the predefined data set
198+
// other configuration properties
199+
});
200+
}
201+
202+
ngOnDestroy() {
203+
this._grid_widget?.destructor(); // destruct a Suite widget
204+
}
205+
}
206+
~~~
207+
208+
:::tip
209+
For more information, refer to the **Data loading** section of the corresponding control: [Tree](tree/loading_data.md), [Toolbar](toolbar/load_data.md), [Sidebar](sidebar/data_loading.md), [Ribbon](ribbon/data_loading.md), [Menu](menu/data_loading.md), [List](list/load_data.md), [Grid](grid/data_loading.md), [DataView](dataview/data_loading.md), [Combobox](combobox/adding_options.md), [Chart](chart/data_loading.md), etc.
210+
:::
211+
212+
#### Specify data through the method
213+
214+
To load predefined data into a Suite widget, you can also call the `parse()` method:
215+
216+
~~~jsx {1,4,27,33} title="grid.component.ts"
217+
import { Grid } from "@dhx/trial-suite";
218+
import "@dhx/trial-suite/codebase/suite.min.css";
219+
220+
import { getData } from "../../../app.data"; // 1. import predefined data
221+
222+
import {
223+
Component,
224+
ElementRef,
225+
OnInit,
226+
OnDestroy,
227+
ViewChild
228+
} from "@angular/core";
229+
230+
@Component({
231+
selector: "app-grid",
232+
template: `<div class="component_container">
233+
<div #grid_container class="widget"></div>
234+
</div>`
235+
})
236+
237+
export class GridComponent implements OnInit, OnDestroy {
238+
@ViewChild("grid_container", { static: true }) grid_container!: ElementRef;
239+
240+
private _grid_widget!: Grid;
241+
242+
ngOnInit() {
243+
const { gridData } = getData(); // 2. initialize the required data set
244+
// initialize a Suite widget without data
245+
this._grid_widget = new Grid(this.grid_container.nativeElement, {
246+
// other configuration properties
247+
});
248+
249+
this._grid_widget.data.parse(gridData); // 3. call the parse() method and pass data as a parameter
250+
}
251+
252+
ngOnDestroy() {
253+
this._grid_widget?.destructor(); // destruct a Suite widget
254+
}
255+
}
256+
~~~
257+
258+
### Handle events
259+
260+
When a user performs some action in a Suite widget, an event is fired. You can use this event to detect an action and run the required code.
261+
262+
~~~jsx {6-8} title="grid.component.ts"
263+
// ...
264+
265+
ngOnInit() {
266+
this._grid_widget = new Grid(this.grid_container.nativeElement, {});
267+
268+
this._grid_widget.events.on("scroll", function({top,left}){
269+
console.log("The grid is scrolled to "+top,left);
270+
});
271+
}
272+
273+
// ...
274+
~~~
275+
276+
Now you know how to integrate and configure any Suite widget with Angular. You can customize the code according to your specific requirements. The extended example you can find on [**GitHub**](https://github.com/DHTMLX/angular-suite-demo).

0 commit comments

Comments
 (0)