Angular Samples

You can find the Angular Samples in the following path,

<install path>/PlatformSamples/AngularSamples

1) How to run the Angular Sample

You can run the Angular Gantt sample using NPM(cmd), Visual Studio 2015+ versions or Visual Studio Code. For all these 3 approaches, you need to first use npm to install the dependent 'node_modules' as mentioned in the steps below. (The 'node_modules' package dependencies are already specified in 'package.json' file.)

Also, make sure to update your npm version to 5.5.1 or later. (Use "npm version" to determine your version). To update to the latest, use cmd line: "npm install npm@latest -g".

Steps to run the Angular sample using NPM:

1. Browse to the project directory (../PlatformSamples/AngularSamples) in command prompt using "Run as administrator" option.

2. Type "npm install". This will install the different dependant modules in the 'node_modules' directory.

3. Run "npm start".

4. The sample automatically runs in default browser. If not, copy the localhost and paste it in browser.

Steps to run the Angular sample using Visual Studio Code:

1. Open Visual Studio Code IDE

2. Import Angular gantt project using File --> Open Folder

3. Open command window using View --> Integrated Terminal and select TERMINAL tab

4. Then follow Step 2 to 4 from NPM steps above.

2) Angular Gantt Structure and Installation

The Angular Gantt package v13.0 is available in <install path>/PlatformSamples/AngularSamples

This platform includes only the necessary files and folders to build and run the basic Angular samples.

Create your project directory and structure it as you need. Ours looks like this,

├── src

│

│ ├── app

│ │ ├── Samples

│ │ │

│ │ ├── gantt-control-custom-data-binding

│ │ │

│ │ └── flexy-gantt-skeleton

│ │

│ ├── rqscripts

│ │ ├── ResourceStrings

│ │ ├── Scripts

│ │ │ ├── jquery-ui-1.12.1

│ │ │ │ └── jquery-ui.min.js

│ │ │ ├── Utils

│ │ │ │ └── date.js

│ │ │ ├── jquery-3.6.0.min.js

│ │ │ ├── jquery.layout-latest.min.js

│ │ │ ├── VW.Grid.1.min.js

│ │ │ └── RadiantQ-jQuery.Gantt.9.0.trial.min.js

│ │ └── Styles

│ │ ├── External

│ │ ├── Images

│ │ ├── jQuery-ui-themes

│ │ ├── VW.Grid.css

│ │ └── radiantq.gantt.default.css

│ ├── main.ts

│ └─ index.html

├── types

│ ├── datejs.d.ts

│ ├── jquery.d.ts

│ ├── jquery.ui.d.ts

│ └── RadiantQGantt_TS2.3.d.ts

├── package.json

└── angular.json

The Angular Gantt files can be listed as follows.

package.json
index.html
types folder
app folder

package.json

The 'package.json' file specifies the project name, description, server and also contains the Angular necessary packages which can be installed during npm installation(explained below).

This JSON file also includes packages like angular-cli, typescript, typings under 'devDependencies'. Here, the user can also add some additional packages based on their project requirement.

index.html

The 'index.html' contains all the gantt source references. It has the root basic app-root component initialization, all the elements and components will render inside this app-root.

'types' folder

The TypeScript declaration files such as datejs.d.ts, jquery.d.ts, RadiantQGantt_TS2.3.d.ts etc., were available in this 'types' folder since Angular gantt is based on TypeScript.

'app' folder

The 'app' folder consists of main.ts, Samples folder.

The following files and directory were available in this 'app' and 'Samples' folder.

Samples folder -
main.ts
SampleBrowser folder

- main.ts

The 'main.ts' imports the angular components such as platformBrowserDynamic, enableProdMode etc., and also gantt classes.

It bootstraps the export class 'AngularSample. Here, the user can also enable production mode using method 'enableProdMode()'

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic()

.bootstrapModule(AppModule)

.catch((err) => console.error(err));

main.ts

- app.module.ts

Here we are imported our components which contains the samples, so that will included in the app module. Also import the third-party library modules here.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { FlexyGanttSkeletonComponent } from './samples/flexy-gantt-skeleton/flexy-gantt-skeleton.component';

import { GanttControlCustomDataBindingComponent } from './samples/gantt-control-custom-data-binding/gantt-control-custom-data-binding';

import { DataService } from './services/data.service';

@NgModule({

declarations: [AppComponent, GanttControlCustomDataBindingComponent, FlexyGanttSkeletonComponent],

imports: [BrowserModule, AppRoutingModule],

providers: [DataService],

bootstrap: [AppComponent],

})

export class AppModule {}

app.module.ts

'Samples' folder

The 'Samples' folder consists of various samples and it's respective html, css, ts files.

Samples folder

- gantt-control-custom-data-binding sample folder

- gantt-control-custom-data-binding.component.ts

- gantt-control-custom-data-binding.component.html

- gantt-control-custom-data-binding.component.css

- flexy-gantt-skeleton sample folder

- flexy-gantt-skeleton.component.ts

- flexy-gantt-skeleton.component.html

- flexy-gantt-skeleton.component.css

These samples were briefly explained here :-

gantt-control-custom-data-binding
flexy-gantt-skeleton