Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
16 changes: 16 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
46 changes: 46 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db
228 changes: 227 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,227 @@
# ej2-documents-angular-samples
# Ej2AngularSamples

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.1.

## **Using the samples**

## Installing

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.

```
npm install
```

## Build

Use `npm run build` command to compile the source files. It calls the following tasks synchronously,

1. SEO changes
2. Styles ship
3. Site-map generate.
4. Copy source
5. Build production
6. Move

### SEO changes

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.

```
gulp SEO-changes
```

### Styles Shipping

It copies css files for themes from node_modules. Use the below command to run it individual.

```
gulp styles-shipping
```

### Site-map generation
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.

```
gulp sitemap-generate
```

### Copy source

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.

```
gulp copy-source
```

### Build Production

Use the below command to flag for a production build.

```
npm run build:prod
```

### Move

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.

```
gulp move
```

## Test

It runs unit tests in a project. Use the below command to run this task,

```
ng test
```

## Lint

It runs linting tools on Angular app code. Use the below command to run lint task,

```
ng lint
```

## Run the Sample Browser

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.

```
npm run start
```

**Access URLs:**

Local URL is works only in your machine.

```
http://localhost:4200
```
External URL is works in all locally connected LAN. (You can use to see sample browser in mobile).

```
http://your-ip-address:4200
```

**Note:** Here, The mentioned IP is your local machine IP Address.

# Angular Sample Configuration

## Adding your sample
Create your new folder in 'src' location and name the folder as control name for example “listview” it is control name.

_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._

## Add module for your sample
Add your sample router module named controlName.module.ts

_Note: Export sample routed array of links. This has used to sample list._

## Add Routing for your sample
Add your sample router module to sb router module
1. Import your **controlName.moduler.ts** in **sb.router.ts**
2. Add imported module to app routes

```
import { ListViewModule } from '../listview/listview.module';

const appRoutes: any = [
{ path: 'listview', loadChildren: ListViewModule },
{ path: '', redirectTo: 'listview/default', pathMatch: 'full' , hideOnDevice:true},
];
```
*Note: set **hideOnDevice** as true if you want to hide a sample in devices.*
## Adding your control dependency

Add your dependency in “package.json” file inside the dependencies.

Note: Here, '\*' Specifies that install the latest published package form the online. '\*' is recommended for Syncfusion packages.

```
"dependencies": {
"@syncfusion/ej2-angular-base": "*",
"@syncfusion/ej2-angular-list": "*",
},
```

Add your dependency in “system.config.js” file inside the packages.

```

packages: {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },

'@syncfusion/ej2-lists': { main: '/src/list-view/index.js', defaultExtension: 'js' },
'@syncfusion/ej2-data': { main: '/index.js', defaultExtension: 'js' },
'@syncfusion/ej2-base': { main: '/index.js', defaultExtension: 'js' },
'@syncfusion/ej2-angular-base': { main: '//index.js', defaultExtension: 'js' },
'@syncfusion/ej2-angular-list': { main: 'src/list-view/index.js', defaultExtension: 'js' }

},

```
## Adding style dependency

Add your dependency in “config.json” file inside the styleDependency array.

```
{
"styleDependency":["ej2-angular-lists"]
}
```
## Add description in sample

Add sample description within the div tag with id as **description**.

```html
<div class="control-section">
<div id='description'>
//sample description.
</div>
</div>
```
## Configure Sample List

Add your samples in “samplelist.ts” located in “/src/common” folder
1. Import your Sample Module routed array for json
2. Add your samples in Sample List as Like below

```
import { listAppRoutes } from '../listview/listview.module';

export let samplesList: any = [
{
"name": "ListView", "category": "List", "path": "listview", "samples": listAppRoutes,
}
];
```

## FAQ

### 1) Is it possible to refer css files in sample html file?

No, In your sample level html files, you don't read css files.

For example: [Refer Here](https://github.com/syncfusion/ej2-angular-samples/blob/master/src/app/diagram/bpmn-editor.html#L1).

### 2) How to solve below Error while compilation?

#### Error:

> ngc -p ./Samples/tsconfig.json

> : Can't bind to 'dataSource' since it isn't a known property of 'ejs-dropdownlist'.
1. If 'ejs-dropdownlist' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div style="max-width: 200px"

#### Solution

If you have used some control in your samples, you have to map component module in your control module.

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)
Loading