1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import GanttChartModule from smart-webcomponents-angular/ganttchart: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { GanttChartModule } from 'smart-webcomponents-angular/ganttchart';

4 Root component (standalone)

Add GanttChartModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewEncapsulation } from '@angular/core';
import { GanttChartComponent, GanttChartTaskColumn } from 'smart-webcomponents-angular/ganttchart';

import { GanttChartModule } from 'smart-webcomponents-angular/ganttchart';

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, GanttChartModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App {
	durationUnit = 'hour';
	taskColumns: GanttChartTaskColumn[] =
		[
			{
				label: 'Tasks',
				value: 'label',
				size: '60%'
			},
			{
				label: 'Duration (hours)',
				value: 'duration',
				formatFunction: (date: string) => parseInt(date)
			}
		]
	dataSource = [
		{
			label: 'PRD & User-Stories',
			dateStart: '2019-01-10',
			dateEnd: '2019-02-10',
			class: 'product-team',
			type: 'task'
		},
		{
			label: 'Persona & Journey',
			dateStart: '2019-02-11',
			dateEnd: '2019-03-10',
			class: 'marketing-team',
			type: 'task'
		},
		{
			label: 'Architecture',
			dateStart: '2019-03-11',
			dateEnd: '2019-04-1',
			class: 'product-team',
			type: 'task'
		},
		{
			label: 'Prototyping',
			dateStart: '2019-04-02',
			dateEnd: '2019-05-01',
			class: 'dev-team',
			type: 'task'
		},
		{
			label: 'Design',
			dateStart: '2019-05-02',
			dateEnd: '2019-06-31',
			class: 'design-team',
			type: 'task'
		},
		{
			label: 'Development',
			dateStart: '2019-07-01',
			dateEnd: '2019-08-10',
			class: 'dev-team',
			type: 'task'
		},
		{
			label: 'Testing & QA',
			dateStart: '2019-08-11',
			dateEnd: '2019-09-10',
			class: 'qa-team',
			type: 'task'
		},
		{
			label: 'UAT Test',
			dateStart: '2019-09-12',
			dateEnd: '2019-10-01',
			class: 'product-team',
			type: 'task'
		},
		{
			label: 'Handover & Documentation',
			dateStart: '2019-10-02',
			dateEnd: '2019-11-01',
			class: 'marketing-team',
			type: 'task'
		},
		{
			label: 'Release',
			dateStart: '2019-11-01',
			dateEnd: '2019-12-31',
			class: 'release-team',
			type: 'task'
		}
	]

	ngOnInit(): void {

	}
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-gantt-chart as needed:

 <smart-gantt-chart #ganttchart [dataSource]="dataSource" [durationUnit]="durationUnit" [taskColumns]="taskColumns"></smart-gantt-chart>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put GanttChartModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put GanttChartModule from smart-webcomponents-angular/ganttchart on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttChartModule } from 'smart-webcomponents-angular/ganttchart';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, GanttChartModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.