update angular to v19 and move to standalone components (#1942)

* angular: move charts-components to standalone components

* angular: move example app to standalone components

* angular: update angular to v19

* angular: remove standalone-setting which became obsolete with angular v19

* angular: move the test app to the new control flow syntax

* angular: sort chart list alphabetically

packages/angular/charts-angular-test/src/app/app.component.html

@@ -1,15 +1,19 @@
 <h1>Carbon Charts Angular</h1>
 <h2>Component Test Harness</h2>
 
-<div *ngFor="let chart of charts" class="container">
-	<h3>{{ chart.types.angular }}</h3>
-	<div *ngFor="let example of chart.examples" class="example">
-		<ng-container *ngIf="example.tags?.includes('test')">
-			<ng-container
-				*ngComponentOutlet="
-					selectorMap[chart.types.angular];
-					inputs: { data: example.data, options: example.options }
-				"></ng-container>
-		</ng-container>
+@for (chart of charts; track $index) {
+	<div class="container">
+		<h3>{{ chart.types.angular }}</h3>
+		@for (example of chart.examples; track $index) {
+			<div class="example">
+				@if (example.tags?.includes('test')) {
+					<ng-container
+						*ngComponentOutlet="
+							selectorMap[chart.types.angular];
+							inputs: { data: example.data, options: example.options }
+						"></ng-container>
+				}
+			</div>
+		}
 	</div>
-</div>
+}

packages/angular/charts-angular-test/src/app/app.component.ts

@@ -27,15 +27,18 @@ import {
 	WordCloudChartComponent
 } from '../../../src/lib/charts'
 import charts from '../../../../docs/src/charts'
+import { CommonModule } from '@angular/common'
 
 @Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'app-root',
 	templateUrl: './app.component.html',
-	styleUrls: ['./app.component.scss']
+	styleUrls: ['./app.component.scss'],
+	imports: [CommonModule]
 })
 export class AppComponent {
 	charts = charts
-	selectorMap: { [key: string]: Type<unknown> } = {
+	selectorMap: Record<string, Type<unknown>> = {
 		'ibm-alluvial-chart': AlluvialChartComponent,
 		'ibm-area-chart': AreaChartComponent,
 		'ibm-boxplot-chart': BoxplotChartComponent,

packages/angular/charts-angular-test/src/main.ts

@@ -1,7 +1,4 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { bootstrapApplication } from '@angular/platform-browser'
+import { AppComponent } from './app/app.component'
 
-import { AppModule } from './app/app.module'
-
-platformBrowserDynamic()
-	.bootstrapModule(AppModule)
-	.catch(err => console.error(err))
+bootstrapApplication(AppComponent).catch(err => console.error(err))

packages/angular/charts-angular-test/src/styles.scss

@@ -1 +1 @@
-@import '@carbon/charts/scss/index.scss';
+@use '@carbon/charts/scss/index.scss';

packages/angular/package.json

@@ -23,31 +23,31 @@
 		"format": "prettier . --write --ignore-path ../../.prettierignore"
 	},
 	"peerDependencies": {
-		"@angular/common": "^18.0.0",
-		"@angular/core": "^18.0.0"
+		"@angular/common": "^19.0.6",
+		"@angular/core": "^19.0.6"
 	},
 	"dependencies": {
 		"@carbon/charts": "workspace:*",
 		"@ibm/telemetry-js": "^1.8.0",
 		"tslib": "^2.8.1"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "^18.2.12",
-		"@angular/cli": "^18.2.12",
-		"@angular/common": "^18.2.13",
-		"@angular/compiler": "^18.2.13",
-		"@angular/compiler-cli": "^18.2.13",
-		"@angular/core": "^18.2.13",
-		"@angular/platform-browser": "^18.2.13",
-		"@angular/platform-browser-dynamic": "^18.2.13",
+		"@angular-devkit/build-angular": "^19.0.7",
+		"@angular/cli": "^19.0.7",
+		"@angular/common": "^19.0.6",
+		"@angular/compiler": "^19.0.6",
+		"@angular/compiler-cli": "^19.0.6",
+		"@angular/core": "^19.0.6",
+		"@angular/platform-browser": "^19.0.6",
+		"@angular/platform-browser-dynamic": "^19.0.6",
 		"@carbon/icons": "^11.53.0",
 		"@playwright/test": "^1.49.1",
-		"angular-eslint": "^18.4.3",
+		"angular-eslint": "^19.0.2",
 		"concurrently": "^9.1.2",
 		"eslint": "^9.18.0",
-		"ng-packagr": "^18.2.1",
+		"ng-packagr": "^19.0.1",
 		"prettier": "^3.4.2",
-		"typescript": "<5.6.0",
+		"typescript": ">=5.5.0 <5.7.0",
 		"typescript-eslint": "^8.20.0",
 		"zone.js": "~0.15.0"
 	},

packages/angular/src/lib/charts/charts.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
 
 import {
 	AlluvialChartComponent,
@@ -8,10 +7,10 @@ import {
 	BoxplotChartComponent,
 	BubbleChartComponent,
 	BulletChartComponent,
+	ChoroplethChartComponent,
 	CirclePackChartComponent,
 	ComboChartComponent,
 	DonutChartComponent,
-	ChoroplethChartComponent,
 	ExperimentalChoroplethChartComponent,
 	GaugeChartComponent,
 	GroupedBarChartComponent,
@@ -32,66 +31,66 @@ import {
 } from './index'
 
 @NgModule({
-	declarations: [
-		BaseChartComponent,
+	declarations: [],
+	imports: [
 		AlluvialChartComponent,
 		AreaChartComponent,
-		StackedAreaChartComponent,
-		SimpleBarChartComponent,
-		GroupedBarChartComponent,
-		StackedBarChartComponent,
+		BaseChartComponent,
 		BoxplotChartComponent,
 		BubbleChartComponent,
 		BulletChartComponent,
 		ChoroplethChartComponent,
+		CirclePackChartComponent,
+		ComboChartComponent,
 		DonutChartComponent,
 		ExperimentalChoroplethChartComponent,
 		GaugeChartComponent,
+		GroupedBarChartComponent,
 		HeatmapChartComponent,
 		HistogramChartComponent,
 		LineChartComponent,
 		LollipopChartComponent,
-		PieChartComponent,
-		ScatterChartComponent,
 		MeterChartComponent,
+		PieChartComponent,
 		RadarChartComponent,
-		ComboChartComponent,
+		ScatterChartComponent,
+		SimpleBarChartComponent,
+		StackedAreaChartComponent,
+		StackedBarChartComponent,
 		TreeChartComponent,
 		TreemapChartComponent,
-		CirclePackChartComponent,
 		WordCloudChartComponent
 	],
-	imports: [CommonModule],
 	exports: [
-		BaseChartComponent,
 		AlluvialChartComponent,
 		AreaChartComponent,
-		StackedAreaChartComponent,
-		SimpleBarChartComponent,
-		GroupedBarChartComponent,
-		StackedBarChartComponent,
+		BaseChartComponent,
 		BoxplotChartComponent,
 		BubbleChartComponent,
 		BulletChartComponent,
 		ChoroplethChartComponent,
+		CirclePackChartComponent,
+		ComboChartComponent,
 		DonutChartComponent,
 		/**
 		 * @deprecated Use `ChoroplethChartComponent` instead.
 		 */
 		ExperimentalChoroplethChartComponent,
 		GaugeChartComponent,
+		GroupedBarChartComponent,
 		HeatmapChartComponent,
 		HistogramChartComponent,
 		LineChartComponent,
 		LollipopChartComponent,
-		PieChartComponent,
-		ScatterChartComponent,
 		MeterChartComponent,
+		PieChartComponent,
 		RadarChartComponent,
-		ComboChartComponent,
+		ScatterChartComponent,
+		SimpleBarChartComponent,
+		StackedAreaChartComponent,
+		StackedBarChartComponent,
 		TreeChartComponent,
 		TreemapChartComponent,
-		CirclePackChartComponent,
 		WordCloudChartComponent
 	]
 })

packages/angular/src/lib/diagrams/edges/edge.component.ts

@@ -2,13 +2,15 @@ import { Component, Input } from '@angular/core'
 import { buildStraightPathString } from '@carbon/charts'
 
 import { carbonPrefix } from '../config'
+import { CommonModule } from '@angular/common'
 
 interface Coordinates {
 	x: number
 	y: number
 }
 @Component({
 	selector: 'ibm-graph-edge, [ibm-graph-edge]',
+	imports: [CommonModule],
 	template: `
 		<svg:g [ngClass]="[namespace, variant ? namespace + '--' + variant : '']">
 			<svg:path
@@ -24,7 +26,8 @@ interface Coordinates {
 				[attr.marker-start]="markerStart ? 'url(#' + markerStart + ')' : ''"
 				[attr.marker-end]="markerEnd ? 'url(#' + markerEnd + ')' : ''" />
 		</svg:g>
-	`
+	`,
+	standalone: true
 })
 export class EdgeComponent {
 	@Input() color = ''

packages/angular/src/lib/diagrams/edges/edge.module.ts

@@ -4,8 +4,8 @@ import { EdgeComponent } from './edge.component'
 export { EdgeComponent } from './edge.component'
 
 @NgModule({
-	declarations: [EdgeComponent],
-	imports: [CommonModule],
+	declarations: [],
+	imports: [CommonModule, EdgeComponent],
 	exports: [EdgeComponent]
 })
 export class EdgeModule {}

packages/angular/src/lib/diagrams/edges/marker/marker.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { arrowLeft, arrowRight, circle, diamond, square, tee } from '@carbon/charts'
 import { carbonPrefix } from '../../config'
+import { CommonModule } from '@angular/common'
 
 const template = `
 <svg:marker
@@ -18,6 +19,8 @@ const template = `
 
 @Component({
 	selector: 'ibm-graph-marker,[ibm-graph-marker]',
+	standalone: true,
+	imports: [CommonModule],
 	template
 })
 export class MarkerComponent {
@@ -58,6 +61,7 @@ export class MarkerComponent {
 
 @Component({
 	selector: 'ibm-graph-marker-arrow-left,[ibm-graph-marker-arrow-left]',
+	imports: [CommonModule],
 	template
 })
 export class MarkerArrowLeftComponent extends MarkerComponent implements OnInit {
@@ -67,6 +71,7 @@ export class MarkerArrowLeftComponent extends MarkerComponent implements OnInit
 }
 @Component({
 	selector: 'ibm-graph-marker-arrow-right,[ibm-graph-marker-arrow-right]',
+	imports: [CommonModule],
 	template
 })
 export class MarkerArrowRightComponent extends MarkerComponent implements OnInit {
@@ -76,6 +81,7 @@ export class MarkerArrowRightComponent extends MarkerComponent implements OnInit
 }
 @Component({
 	selector: 'ibm-graph-marker-circle,[ibm-graph-marker-circle]',
+	imports: [CommonModule],
 	template
 })
 export class MarkerShapeNodeComponent extends MarkerComponent implements OnInit {
@@ -85,6 +91,7 @@ export class MarkerShapeNodeComponent extends MarkerComponent implements OnInit
 }
 @Component({
 	selector: 'ibm-graph-marker-diamond,[ibm-graph-marker-diamond]',
+	imports: [CommonModule],
 	template
 })
 export class MarkerDiamondComponent extends MarkerComponent implements OnInit {
@@ -94,6 +101,7 @@ export class MarkerDiamondComponent extends MarkerComponent implements OnInit {
 }
 @Component({
 	selector: 'ibm-graph-marker-square,[ibm-graph-marker-square]',
+	imports: [CommonModule],
 	template
 })
 export class MarkerSquareComponent extends MarkerComponent implements OnInit {
@@ -103,6 +111,7 @@ export class MarkerSquareComponent extends MarkerComponent implements OnInit {
 }
 @Component({
 	selector: 'ibm-graph-marker-tee,[ibm-graph-marker-tee]',
+	imports: [CommonModule],
 	template
 })
 export class MarkerTeeComponent extends MarkerComponent implements OnInit {

packages/angular/src/lib/diagrams/edges/marker/marker.module.ts

@@ -20,7 +20,9 @@ export {
 	MarkerTeeComponent
 }
 @NgModule({
-	declarations: [
+	declarations: [],
+	imports: [
+		CommonModule,
 		MarkerComponent,
 		MarkerArrowLeftComponent,
 		MarkerArrowRightComponent,
@@ -29,7 +31,6 @@ export {
 		MarkerSquareComponent,
 		MarkerTeeComponent
 	],
-	imports: [CommonModule],
 	exports: [
 		MarkerComponent,
 		MarkerArrowLeftComponent,

packages/angular/src/lib/diagrams/nodes/cards/card-node-column.component.ts

@@ -1,13 +1,16 @@
 import { Component, Input, HostBinding } from '@angular/core'
 import { carbonPrefix } from '../../config'
+import { CommonModule } from '@angular/common'
 
 @Component({
 	selector: 'ibm-diagram-card-node-column',
+	imports: [CommonModule],
 	template: `
 		<xhtml:div>
 			<ng-content></ng-content>
 		</xhtml:div>
-	`
+	`,
+	standalone: true
 })
 export class CardNodeColumnComponent {
 	@Input() farsideColumn = false

packages/angular/src/lib/diagrams/nodes/cards/card-node-label.component.ts

@@ -1,13 +1,16 @@
 import { Component } from '@angular/core'
 import { carbonPrefix } from '../../config'
+import { CommonModule } from '@angular/common'
 
 @Component({
 	selector: 'ibm-diagram-card-node-label',
+	imports: [CommonModule],
 	template: `
 		<xhtml:label [ngClass]="namespace">
 			<ng-content></ng-content>
 		</xhtml:label>
-	`
+	`,
+	standalone: true
 })
 export class CardNodeLabelComponent {
 	namespace = `${carbonPrefix}--cc--card-node__label`