-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 97dce9f
Showing
35 changed files
with
12,233 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# Binding observable data to an Angular TreeGrid | ||
|
||
Learn how you can bind observable data to the Syncfusion Angular TreeGrid control. This example explains how to bind observables using the async pipe to subscribe to observable objects and get the latest emitted values. It also explains how to bind observable data while expand operations are performed in the TreeGrid. | ||
|
||
Documentation: https://ej2.syncfusion.com/angular/documentation/treegrid/observables/?no-cache=1#observables | ||
|
||
|
||
## Project prerequisites | ||
Make sure you have the compatible versions of TypeScript and Angular on your machine before starting to work on this project: | ||
* Angular 4+ | ||
* TypeScript 2.6+ | ||
|
||
## How to run this application | ||
To run this application, you need to first clone the `Binding-Observable-data-to-an-Angular-Tree-Grid` repository and then navigate to the path where it has been copied to your system. | ||
|
||
To do this, open the Command Prompt and run the following commands, one after the other: | ||
|
||
``` | ||
git clone https://github.com/SyncfusionExamples/Binding-Observable-data-to-an-Angular-Tree-Grid treegrid-example | ||
cd treegrid-example | ||
``` | ||
|
||
## Installation | ||
Once done with downloading, you need to install the necessary packages required to run this application locally. To do so, run the following command: | ||
|
||
``` | ||
npm install | ||
``` | ||
This will install all the needed Angular packages into your current project. | ||
|
||
## Running on a development server | ||
Run the `ng serve` command for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. | ||
|
||
## Further help | ||
|
||
To get more help with the Angular CLI, use `ng help` or check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
{ | ||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", | ||
"version": 1, | ||
"newProjectRoot": "projects", | ||
"projects": { | ||
"editing": { | ||
"root": "", | ||
"sourceRoot": "src", | ||
"projectType": "application", | ||
"prefix": "app", | ||
"schematics": {}, | ||
"architect": { | ||
"build": { | ||
"builder": "@angular-devkit/build-angular:browser", | ||
"options": { | ||
"outputPath": "dist/editing", | ||
"index": "src/index.html", | ||
"main": "src/main.ts", | ||
"polyfills": "src/polyfills.ts", | ||
"tsConfig": "src/tsconfig.app.json", | ||
"assets": [ | ||
"src/favicon.ico", | ||
"src/assets" | ||
], | ||
"styles": [ | ||
"src/styles.css", | ||
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css" | ||
], | ||
"scripts": [] | ||
}, | ||
"configurations": { | ||
"production": { | ||
"fileReplacements": [ | ||
{ | ||
"replace": "src/environments/environment.ts", | ||
"with": "src/environments/environment.prod.ts" | ||
} | ||
], | ||
"optimization": true, | ||
"outputHashing": "all", | ||
"sourceMap": false, | ||
"extractCss": true, | ||
"namedChunks": false, | ||
"aot": true, | ||
"extractLicenses": true, | ||
"vendorChunk": false, | ||
"buildOptimizer": true, | ||
"budgets": [ | ||
{ | ||
"type": "initial", | ||
"maximumWarning": "2mb", | ||
"maximumError": "5mb" | ||
} | ||
] | ||
} | ||
} | ||
}, | ||
"serve": { | ||
"builder": "@angular-devkit/build-angular:dev-server", | ||
"options": { | ||
"browserTarget": "editing:build" | ||
}, | ||
"configurations": { | ||
"production": { | ||
"browserTarget": "editing:build:production" | ||
} | ||
} | ||
}, | ||
"extract-i18n": { | ||
"builder": "@angular-devkit/build-angular:extract-i18n", | ||
"options": { | ||
"browserTarget": "editing:build" | ||
} | ||
}, | ||
"test": { | ||
"builder": "@angular-devkit/build-angular:karma", | ||
"options": { | ||
"main": "src/test.ts", | ||
"polyfills": "src/polyfills.ts", | ||
"tsConfig": "src/tsconfig.spec.json", | ||
"karmaConfig": "src/karma.conf.js", | ||
"styles": [ | ||
"src/styles.css", | ||
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css" | ||
], | ||
"scripts": [], | ||
"assets": [ | ||
"src/favicon.ico", | ||
"src/assets" | ||
] | ||
} | ||
}, | ||
"lint": { | ||
"builder": "@angular-devkit/build-angular:tslint", | ||
"options": { | ||
"tsConfig": [ | ||
"src/tsconfig.app.json", | ||
"src/tsconfig.spec.json" | ||
], | ||
"exclude": [ | ||
"**/node_modules/**" | ||
] | ||
} | ||
} | ||
} | ||
}, | ||
"editing-e2e": { | ||
"root": "e2e/", | ||
"projectType": "application", | ||
"prefix": "", | ||
"architect": { | ||
"e2e": { | ||
"builder": "@angular-devkit/build-angular:protractor", | ||
"options": { | ||
"protractorConfig": "e2e/protractor.conf.js", | ||
"devServerTarget": "editing:serve" | ||
}, | ||
"configurations": { | ||
"production": { | ||
"devServerTarget": "editing:serve:production" | ||
} | ||
} | ||
}, | ||
"lint": { | ||
"builder": "@angular-devkit/build-angular:tslint", | ||
"options": { | ||
"tsConfig": "e2e/tsconfig.e2e.json", | ||
"exclude": [ | ||
"**/node_modules/**" | ||
] | ||
} | ||
} | ||
} | ||
} | ||
}, | ||
"defaultProject": "editing" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
// Protractor configuration file, see link for more information | ||
// https://github.com/angular/protractor/blob/master/lib/config.ts | ||
|
||
const { SpecReporter } = require('jasmine-spec-reporter'); | ||
|
||
exports.config = { | ||
allScriptsTimeout: 11000, | ||
specs: [ | ||
'./src/**/*.e2e-spec.ts' | ||
], | ||
capabilities: { | ||
'browserName': 'chrome' | ||
}, | ||
directConnect: true, | ||
baseUrl: 'http://localhost:4200/', | ||
framework: 'jasmine', | ||
jasmineNodeOpts: { | ||
showColors: true, | ||
defaultTimeoutInterval: 30000, | ||
print: function() {} | ||
}, | ||
onPrepare() { | ||
require('ts-node').register({ | ||
project: require('path').join(__dirname, './tsconfig.e2e.json') | ||
}); | ||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { AppPage } from './app.po'; | ||
|
||
describe('workspace-project App', () => { | ||
let page: AppPage; | ||
|
||
beforeEach(() => { | ||
page = new AppPage(); | ||
}); | ||
|
||
it('should display welcome message', () => { | ||
page.navigateTo(); | ||
expect(page.getTitleText()).toEqual('Welcome to editing!'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { browser, by, element } from 'protractor'; | ||
|
||
export class AppPage { | ||
navigateTo() { | ||
return browser.get('/'); | ||
} | ||
|
||
getTitleText() { | ||
return element(by.css('app-root h1')).getText(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"extends": "../tsconfig.json", | ||
"compilerOptions": { | ||
"outDir": "../out-tsc/app", | ||
"module": "commonjs", | ||
"target": "es5", | ||
"types": [ | ||
"jasmine", | ||
"jasminewd2", | ||
"node" | ||
] | ||
} | ||
} |
Oops, something went wrong.