|
1 | | -# Ej2AngularSamples |
| 1 | +# Syncfusion Angular Component Demo Samples |
2 | 2 |
|
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. |
4 | 4 |
|
5 | | -## **Using the samples** |
| 5 | +## Prerequisites |
6 | 6 |
|
7 | | -## Installing |
| 7 | +- [Node.js](https://nodejs.org/en) - `v18+` |
8 | 8 |
|
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 |
10 | 10 |
|
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 |
56 | 12 |
|
57 | | -### Build Production |
| 13 | +1. Install the required dependencies using npm |
58 | 14 |
|
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 |
87 | 17 | ``` |
88 | 18 |
|
89 | | -## Run the Sample Browser |
| 19 | +2. Start the development server using gulp |
90 | 20 |
|
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 |
94 | 22 | npm run start |
95 | 23 | ``` |
96 | 24 |
|
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. |
0 commit comments