Skip to content

Commit b5e8810

Browse files
author
pipeline
committed
v25.1.35 is released
1 parent 566d0ef commit b5e8810

File tree

2,822 files changed

+21689
-117592
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,822 files changed

+21689
-117592
lines changed

README.md

Lines changed: 12 additions & 214 deletions
Original file line numberDiff line numberDiff line change
@@ -1,227 +1,25 @@
1-
# Ej2AngularSamples
1+
# Syncfusion Angular Component Demo Samples
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.1.
3+
Welcome to the demo samples repository for Syncfusion Angular components! This repository contains a collection of sample applications showcasing the usage of various Syncfusion components in a Angular environment.
44

5-
## **Using the samples**
5+
## Prerequisites
66

7-
## Installing
7+
- [Node.js](https://nodejs.org/en) - `v18+`
88

9-
Before installation check `@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/` is available in npmrc file. Then use the below command to install all dependent packages.
9+
## Run the samples
1010

11-
```
12-
npm install
13-
```
14-
15-
## Build
16-
17-
Use `npm run build` command to compile the source files. It calls the following tasks synchronously,
18-
19-
1. SEO changes
20-
2. Styles ship
21-
3. Site-map generate.
22-
4. Copy source
23-
5. Build production
24-
6. Move
25-
26-
### SEO changes
27-
28-
It will set meta data and description for the h1 tag to show our components first in search engine. Use the below command to run it individual.
29-
30-
```
31-
gulp SEO-changes
32-
```
33-
34-
### Styles Shipping
35-
36-
It copies css files for themes from node_modules. Use the below command to run it individual.
37-
38-
```
39-
gulp styles-shipping
40-
```
41-
42-
### Site-map generation
43-
The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
44-
45-
```
46-
gulp sitemap-generate
47-
```
48-
49-
### Copy source
50-
51-
It select all the files in `src/app/` and check the indexof value of the files in `/common`. If the condition satisfies it copy the files to `src/source`. Use the below command to run this task.
52-
53-
```
54-
gulp copy-source
55-
```
11+
To run the sample applications locally, follow these steps
5612

57-
### Build Production
13+
1. Install the required dependencies using npm
5814

59-
Use the below command to flag for a production build.
60-
61-
```
62-
npm run build:prod
63-
```
64-
65-
### Move
66-
67-
It copy files from OpennewSamples folder to output folder and replace `(/assets)` to `(./assets)` if the `./output/main-es5.js` is exist. To run this task use the below command.
68-
69-
```
70-
gulp move
71-
```
72-
73-
## Test
74-
75-
It runs unit tests in a project. Use the below command to run this task,
76-
77-
```
78-
ng test
79-
```
80-
81-
## Lint
82-
83-
It runs linting tools on Angular app code. Use the below command to run lint task,
84-
85-
```
86-
ng lint
15+
```bash
16+
npm install
8717
```
8818

89-
## Run the Sample Browser
19+
2. Start the development server using gulp
9020

91-
To run your sample browser you can use any of the following command. This will help at development time. If any changes detect means it will automatically compile and browser will reloaded.
92-
93-
```
21+
```bash
9422
npm run start
9523
```
9624

97-
**Access URLs:**
98-
99-
Local URL is works only in your machine.
100-
101-
```
102-
http://localhost:4200
103-
```
104-
External URL is works in all locally connected LAN. (You can use to see sample browser in mobile).
105-
106-
```
107-
http://your-ip-address:4200
108-
```
109-
110-
**Note:** Here, The mentioned IP is your local machine IP Address.
111-
112-
# Angular Sample Configuration
113-
114-
## Adding your sample
115-
Create your new folder in 'src' location and name the folder as control name for example “listview” it is control name.
116-
117-
_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._
118-
119-
## Add module for your sample
120-
Add your sample router module named controlName.module.ts
121-
122-
_Note: Export sample routed array of links. This has used to sample list._
123-
124-
## Add Routing for your sample
125-
Add your sample router module to sb router module
126-
1. Import your **controlName.moduler.ts** in **sb.router.ts**
127-
2. Add imported module to app routes
128-
129-
```
130-
import { ListViewModule } from '../listview/listview.module';
131-
132-
const appRoutes: any = [
133-
{ path: 'listview', loadChildren: ListViewModule },
134-
{ path: '', redirectTo: 'listview/default', pathMatch: 'full' , hideOnDevice:true},
135-
];
136-
```
137-
*Note: set **hideOnDevice** as true if you want to hide a sample in devices.*
138-
## Adding your control dependency
139-
140-
Add your dependency in “package.json” file inside the dependencies.
141-
142-
Note: Here, '\*' Specifies that install the latest published package form the online. '\*' is recommended for Syncfusion packages.
143-
144-
```
145-
"dependencies": {
146-
"@syncfusion/ej2-angular-base": "*",
147-
"@syncfusion/ej2-angular-list": "*",
148-
},
149-
```
150-
151-
Add your dependency in “system.config.js” file inside the packages.
152-
153-
```
154-
155-
packages: {
156-
'app': { main: 'main.js', defaultExtension: 'js' },
157-
'rxjs': { defaultExtension: 'js' },
158-
159-
'@syncfusion/ej2-lists': { main: '/src/list-view/index.js', defaultExtension: 'js' },
160-
'@syncfusion/ej2-data': { main: '/index.js', defaultExtension: 'js' },
161-
'@syncfusion/ej2-base': { main: '/index.js', defaultExtension: 'js' },
162-
'@syncfusion/ej2-angular-base': { main: '//index.js', defaultExtension: 'js' },
163-
'@syncfusion/ej2-angular-list': { main: 'src/list-view/index.js', defaultExtension: 'js' }
164-
165-
},
166-
167-
```
168-
## Adding style dependency
169-
170-
Add your dependency in “config.json” file inside the styleDependency array.
171-
172-
```
173-
{
174-
"styleDependency":["ej2-angular-lists"]
175-
}
176-
```
177-
## Add description in sample
178-
179-
Add sample description within the div tag with id as **description**.
180-
181-
```html
182-
<div class="control-section">
183-
<div id='description'>
184-
//sample description.
185-
</div>
186-
</div>
187-
```
188-
## Configure Sample List
189-
190-
Add your samples in “samplelist.ts” located in “/src/common” folder
191-
1. Import your Sample Module routed array for json
192-
2. Add your samples in Sample List as Like below
193-
194-
```
195-
import { listAppRoutes } from '../listview/listview.module';
196-
197-
export let samplesList: any = [
198-
{
199-
"name": "ListView", "category": "List", "path": "listview", "samples": listAppRoutes,
200-
}
201-
];
202-
```
203-
204-
## FAQ
205-
206-
### 1) Is it possible to refer css files in sample html file?
207-
208-
No, In your sample level html files, you don't read css files.
209-
210-
For example: [Refer Here](https://github.com/syncfusion/ej2-angular-samples/blob/master/src/app/diagram/bpmn-editor.html#L1).
211-
212-
### 2) How to solve below Error while compilation?
213-
214-
#### Error:
215-
216-
> ngc -p ./Samples/tsconfig.json
217-
218-
> : Can't bind to 'dataSource' since it isn't a known property of 'ejs-dropdownlist'.
219-
1. If 'ejs-dropdownlist' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
220-
2. If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
221-
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div style="max-width: 200px"
222-
223-
#### Solution
224-
225-
If you have used some control in your samples, you have to map component module in your control module.
226-
227-
For Example: If You use `ejs-dropdownlist` control in your [sample](https://github.com/syncfusion/ej2-angular-samples/blob/master/src/app/diagram/ports.html#L133), you need to import that control module in your sample level [modulefile](https://github.com/syncfusion/ej2-angular-samples/blob/master/src/app/diagram/diagram.module.ts#L13)
25+
3. Open your web browser and navigate to the specified localhost address to view the samples.

angular.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,18 @@
5555
"builder": "@angular-devkit/build-angular:dev-server",
5656
"configurations": {
5757
"production": {
58-
"browserTarget": "ej2-angular-samples:build:production"
58+
"buildTarget": "ej2-angular-samples:build:production"
5959
},
6060
"development": {
61-
"browserTarget": "ej2-angular-samples:build:development"
61+
"buildTarget": "ej2-angular-samples:build:development"
6262
}
6363
},
6464
"defaultConfiguration": "development"
6565
},
6666
"extract-i18n": {
6767
"builder": "@angular-devkit/build-angular:extract-i18n",
6868
"options": {
69-
"browserTarget": "ej2-angular-samples:build"
69+
"buildTarget": "ej2-angular-samples:build"
7070
}
7171
},
7272
"test": {

config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"styleDependency": ["ej2"],
66
"github": ["/source/**/*.{css,ts,html,json}", "!/source/**/*.{d.ts,ngfactory.ts,ngstyle.ts,ngsummary.json}", "./styles/images{,/**}", "./styles/{index.css,highlight.css}", "./styles/*.scss", "./dist/zone.min.js", "/source/**/images{,/**}", "/source/common/cldr-data{,/**}", "./index.html", "./favicon.ico", "package.json", "tsconfig-aot.json", "webpack.config.js", "license"],
77
"publishSamples": ["./output/**/*.*"],
8-
"releaseVersion": "24.2.3",
8+
"releaseVersion": "25.1.35",
99
"platform": "angular",
1010
"customNames": [
1111
"listview",

package.json

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
{
22
"name": "ej2-angular-samples",
3-
"version": "24.2.3",
3+
"version": "25.1.35",
44
"private": true,
55
"dependencies": {
6-
"@angular/animations": "^15.1.0",
7-
"@angular/common": "^15.1.0",
8-
"@angular/compiler": "^15.1.0",
9-
"@angular/core": "^15.1.0",
10-
"@angular/forms": "^15.1.0",
11-
"@angular/http": "^6.1.0",
12-
"@angular/platform-browser": "^15.1.0",
13-
"@angular/platform-browser-dynamic": "^15.1.0",
14-
"@angular/router": "^15.1.0",
6+
"@angular/animations": "17.1.2",
7+
"@angular/common": "17.1.2",
8+
"@angular/compiler": "17.1.2",
9+
"@angular/core": "17.1.2",
10+
"@angular/forms": "17.1.2",
11+
"@angular/platform-browser": "17.1.2",
12+
"@angular/platform-browser-dynamic": "17.1.2",
13+
"@angular/router": "17.1.2",
1514
"@microsoft/signalr": "5.0.9",
1615
"@syncfusion/ej2": "*",
1716
"@syncfusion/ej2-angular-barcode-generator": "*",
@@ -50,32 +49,31 @@
5049
"@syncfusion/ej2-angular-treemap": "*",
5150
"@syncfusion/ej2-angular-image-editor": "*",
5251
"marked": "4.0.10",
53-
"rxjs": "~7.8.0"
52+
"rxjs": "7.8.0"
5453
},
5554
"devDependencies": {
56-
"@angular-devkit/build-angular": "^15.1.4",
57-
"@angular/cli": "~15.1.4",
58-
"@angular/compiler-cli": "^15.1.0",
59-
"@types/jasmine": "~4.3.0",
60-
"@types/codemirror": "^0.0.56",
61-
"child_process": "^1.0.2",
62-
"codemirror": "^5.37.0",
55+
"@angular-devkit/build-angular": "17.1.2",
56+
"@angular/cli": "17.1.2",
57+
"@angular/compiler-cli": "17.1.2",
58+
"@types/jasmine": "4.3.0",
59+
"child_process": "1.0.2",
60+
"codemirror": "5.37.0",
6361
"elasticlunr": "0.9.5",
64-
"fuse.js": "^3.2.0",
65-
"gulp": "^4.0.2",
66-
"gulp-gzip": "1.4.2",
62+
"fuse.js": "6.6.2",
63+
"gulp": "4.0.2",
6764
"gulp-s3-upload": "1.6.6",
68-
"jasmine-core": "~4.5.0",
69-
"karma": "~6.4.0",
70-
"karma-chrome-launcher": "~3.1.0",
71-
"karma-coverage": "~2.2.0",
72-
"karma-jasmine": "~5.1.0",
73-
"karma-jasmine-html-reporter": "~2.0.0",
65+
"gulp-gzip": "1.4.2",
66+
"jasmine-core": "4.5.0",
67+
"karma": "6.4.0",
68+
"karma-chrome-launcher": "3.1.0",
69+
"karma-coverage": "2.2.0",
70+
"karma-jasmine": "5.1.0",
71+
"karma-jasmine-html-reporter": "2.0.0",
7472
"node-fetch": "2.6.7",
75-
"shelljs": "^0.8.5",
76-
"tslib": "^2.3.0",
77-
"typescript": "~4.9.4",
78-
"zone.js": "~0.12.0"
73+
"shelljs": "0.8.5",
74+
"tslib": "2.3.0",
75+
"typescript": "5.3.3",
76+
"zone.js": "0.14.3"
7977
},
8078
"scripts": {
8179
"ng": "ng",

sampleOrder.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,16 @@
240240
"empty-point": "Column with null and 0 values"
241241
}
242242
},
243+
"three-dimension-circular-chart": {
244+
"ControlName": "3D Circular Chart",
245+
"Samples": {
246+
"pie": "Pie",
247+
"donut": "Donut",
248+
"pie-legend": "Pie with Legend",
249+
"pie-radius": "Pie with Various Radius",
250+
"selection": "Selection"
251+
}
252+
},
243253
"chips": {
244254
"ControlName": "Chips",
245255
"Samples": {
@@ -1109,6 +1119,25 @@
11091119
"multiline-textbox": "Multiline TextBox"
11101120
}
11111121
},
1122+
"textarea": {
1123+
"ControlName": "TextArea",
1124+
"Samples": {
1125+
"default": "Default Functionalities",
1126+
"floating-label": "Floating Label",
1127+
"resize": "Resize",
1128+
"api": "API",
1129+
"template-driven-forms": "Template-driven Forms",
1130+
"reactive-forms": "Reactive Forms"
1131+
}
1132+
},
1133+
"timeline": {
1134+
"ControlName": "Timeline",
1135+
"Samples": {
1136+
"default": "Default Functionalities",
1137+
"api": "API",
1138+
"template": "Template"
1139+
}
1140+
},
11121141
"timepicker": {
11131142
"ControlName": "TimePicker",
11141143
"Samples": {

0 commit comments

Comments
 (0)