Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 503940d

Browse files
andre-steudeladumesny
andre-steudel
and
adumesny
authored
angular upgrade v18 -> v19 (#2877)
* Update to Angular 19 * Run default standalone migration * refactor to standalone components * Undo control flow migration --------- Co-authored-by: Alain Dumesny <[email protected]>
1 parent 9eb6075 commit 503940d

File tree

10 files changed

+1887
-1892
lines changed

10 files changed

+1887
-1892
lines changed

‎angular/README.md

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -29,32 +29,30 @@ CSS
2929
}
3030
```
3131

32-
in your module Code
33-
34-
```ts
35-
import { GridstackModule } from 'gridstack/dist/angular';
36-
37-
@NgModule({
38-
imports: [GridstackModule, ...]
39-
...
40-
bootstrap: [AppComponent]
41-
})
42-
export class AppModule { }
43-
```
44-
4532
Component Code
4633

4734
```ts
4835
import { GridStackOptions } from 'gridstack';
36+
import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
4937

50-
// sample grid options + items to load...
51-
public gridOptions: GridStackOptions = {
52-
margin: 5,
53-
children: [ // or call load()/addWidget() with same data
54-
{x:0, y:0, minW:2, content:'Item 1'},
55-
{x:1, y:0, content:'Item 2'},
56-
{x:0, y:1, content:'Item 3'},
38+
@Component({
39+
imports: [
40+
GridstackComponent,
41+
GridstackItemComponent
5742
]
43+
...
44+
})
45+
export class MyComponent {
46+
// sample grid options + items to load...
47+
public gridOptions: GridStackOptions = {
48+
margin: 5,
49+
children: [ // or call load()/addWidget() with same data
50+
{x:0, y:0, minW:2, content:'Item 1'},
51+
{x:1, y:0, content:'Item 2'},
52+
{x:0, y:1, content:'Item 3'},
53+
]
54+
}
55+
5856
}
5957
```
6058

@@ -97,11 +95,16 @@ export class AComponent extends BaseWidget implements OnDestroy {
9795
export class BComponent extends BaseWidget {
9896
}
9997

100-
// .... in your module for example
101-
constructor() {
102-
// register all our dynamic components types created by the grid
103-
GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
104-
}
98+
// in your app.config for example
99+
export const appConfig: ApplicationConfig = {
100+
providers: [
101+
...
102+
provideEnvironmentInitializer(() => {
103+
// register all our dynamic components created in the grid
104+
GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
105+
})
106+
]
107+
};
105108

106109
// now our content will use Components instead of dummy html content
107110
public gridOptions: NgGridStackOptions = {
@@ -175,7 +178,7 @@ Code started shipping with v8.1.2+ in `dist/angular` for people to use directly
175178

176179
- This wrapper needs:
177180
- gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
178-
- Angular 14+ for dynamic `createComponent()` API
181+
- Angular 14+ for dynamic `createComponent()` API and Standalone Components
179182

180183
NOTE: if you are on Angular 13 or below: copy the wrapper code over (or patch it - see main page example) and change `createComponent()` calls to use old API instead:
181184
```ts

‎angular/package.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,31 @@
1010
},
1111
"private": true,
1212
"dependencies": {
13-
"@angular/animations": "~18.2.6",
14-
"@angular/common": "~18.2.6",
15-
"@angular/compiler": "~18.2.6",
16-
"@angular/core": "~18.2.6",
17-
"@angular/forms": "~18.2.6",
18-
"@angular/platform-browser": "~18.2.6",
19-
"@angular/platform-browser-dynamic": "~18.2.6",
20-
"@angular/router": "~18.2.6",
13+
"@angular/animations": "~19.0.0",
14+
"@angular/common": "~19.0.0",
15+
"@angular/compiler": "~19.0.0",
16+
"@angular/core": "~19.0.0",
17+
"@angular/forms": "~19.0.0",
18+
"@angular/platform-browser": "~19.0.0",
19+
"@angular/platform-browser-dynamic": "~19.0.0",
20+
"@angular/router": "~19.0.0",
2121
"gridstack": "^11.1.1",
2222
"rxjs": "~7.5.0",
2323
"tslib": "^2.3.0",
24-
"zone.js": "~0.14"
24+
"zone.js": "~0.15.0"
2525
},
2626
"devDependencies": {
27-
"@angular-devkit/build-angular": "~18.2.6",
28-
"@angular/cli": "~18.2.6",
29-
"@angular/compiler-cli": "~18.2.6",
27+
"@angular-devkit/build-angular": "~19.0.0",
28+
"@angular/cli": "~19.0.0",
29+
"@angular/compiler-cli": "~19.0.0",
3030
"@types/jasmine": "~4.0.0",
3131
"jasmine-core": "~4.3.0",
3232
"karma": "~6.4.4",
3333
"karma-chrome-launcher": "~3.1.0",
3434
"karma-coverage": "~2.2.0",
3535
"karma-jasmine": "~5.1.0",
3636
"karma-jasmine-html-reporter": "~2.0.0",
37-
"ng-packagr": "~18.2.1",
38-
"typescript": "~5.4"
37+
"ng-packagr": "~19.0.0",
38+
"typescript": "~5.6.3"
3939
}
4040
}

‎angular/projects/demo/src/app/app.component.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,21 @@ import { AngularNgForCmdTestComponent } from './ngFor_cmd';
66

77
// TEST: local testing of file
88
// import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from './gridstack.component';
9-
import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
9+
import { GridstackComponent, GridstackItemComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
1010

1111
// unique ids sets for each item for correct ngFor updating
1212
let ids = 1;
1313
@Component({
1414
selector: 'app-root',
1515
templateUrl: './app.component.html',
16-
styleUrls: ['./app.component.css']
16+
styleUrls: ['./app.component.css'],
17+
imports: [
18+
AngularSimpleComponent,
19+
AngularNgForTestComponent,
20+
AngularNgForCmdTestComponent,
21+
GridstackComponent,
22+
GridstackItemComponent
23+
]
1724
})
1825
export class AppComponent implements OnInit {
1926

‎angular/projects/demo/src/app/app.config.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ApplicationConfig, provideEnvironmentInitializer } from '@angular/core';
2+
3+
// TEST local testing
4+
// import { GridstackComponent } from './gridstack.component';
5+
import { GridstackComponent } from 'gridstack/dist/angular';
6+
import { AComponent, BComponent, CComponent, NComponent } from './dummy.component';
7+
8+
export const appConfig: ApplicationConfig = {
9+
providers: [
10+
provideEnvironmentInitializer(() => {
11+
// register all our dynamic components created in the grid
12+
GridstackComponent.addComponentToSelectorType([AComponent, BComponent, CComponent, NComponent]);
13+
})
14+
]
15+
};

‎angular/projects/demo/src/app/app.module.ts

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎angular/projects/demo/src/app/dummy.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
1414

1515
@Component({
1616
selector: 'app-a',
17-
template: 'Comp A {{text}}',
17+
template: 'Comp A {{text}}'
1818
})
1919
export class AComponent extends BaseWidget implements OnDestroy {
2020
@Input() text: string = 'foo'; // test custom input data
@@ -25,7 +25,7 @@ export class AComponent extends BaseWidget implements OnDestroy {
2525

2626
@Component({
2727
selector: 'app-b',
28-
template: 'Comp B',
28+
template: 'Comp B'
2929
})
3030
export class BComponent extends BaseWidget implements OnDestroy {
3131
constructor() { super(); console.log('Comp B created'); }
@@ -34,7 +34,7 @@ export class BComponent extends BaseWidget implements OnDestroy {
3434

3535
@Component({
3636
selector: 'app-c',
37-
template: 'Comp C',
37+
template: 'Comp C'
3838
})
3939
export class CComponent extends BaseWidget implements OnDestroy {
4040
ngOnDestroy() { console.log('Comp C destroyed'); }
@@ -51,7 +51,7 @@ export class CComponent extends BaseWidget implements OnDestroy {
5151
styles: [`
5252
:host { height: 100%; display: flex; flex-direction: column; }
5353
::ng-deep .grid-stack.grid-stack-nested { flex: 1; }
54-
`],
54+
`]
5555
})
5656
export class NComponent extends BaseWidget implements OnDestroy {
5757
/** this is where the dynamic nested grid will be hosted. gsCreateNgComponents() looks for 'container' like GridstackItemComponent */

‎angular/projects/demo/src/main.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { enableProdMode } from '@angular/core';
2-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3-
4-
import { AppModule } from './app/app.module';
2+
import { bootstrapApplication } from '@angular/platform-browser';
3+
import { AppComponent } from './app/app.component';
4+
import { appConfig } from './app/app.config';
55
import { environment } from './environments/environment';
66

77
if (environment.production) {
88
enableProdMode();
99
}
1010

11-
platformBrowserDynamic().bootstrapModule(AppModule)
12-
.catch(err => console.error(err));
11+
bootstrapApplication(AppComponent, appConfig)
12+
.catch((err) => console.error(err));

‎angular/projects/lib/src/lib/gridstack.component.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
77
OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core';
8+
import { NgIf } from '@angular/common';
89
import { Subscription } from 'rxjs';
910
import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
1011

@@ -60,6 +61,7 @@ export type SelectorToType = {[key: string]: Type<Object>};
6061
styles: [`
6162
:host { display: block; }
6263
`],
64+
imports: [NgIf]
6365
// changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
6466
})
6567
export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
@@ -130,6 +132,13 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
130132
// protected readonly cd: ChangeDetectorRef,
131133
protected readonly elementRef: ElementRef<GridCompHTMLElement>,
132134
) {
135+
// set globally our method to create the right widget type
136+
if (!GridStack.addRemoveCB) {
137+
GridStack.addRemoveCB = gsCreateNgComponents;
138+
}
139+
if (!GridStack.saveCB) {
140+
GridStack.saveCB = gsSaveAdditionalNgInfo;
141+
}
133142
this.el._gridComp = this;
134143
}
135144

‎angular/projects/lib/src/lib/gridstack.module.ts

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,13 @@
44
*/
55

66
import { NgModule } from "@angular/core";
7-
import { CommonModule } from '@angular/common';
87

9-
import { GridStack } from "gridstack";
10-
import { GridstackComponent, gsCreateNgComponents, gsSaveAdditionalNgInfo } from "./gridstack.component";
8+
import { GridstackComponent } from "./gridstack.component";
119
import { GridstackItemComponent } from "./gridstack-item.component";
1210

11+
// @deprecated use GridstackComponent and GridstackItemComponent as standalone components
1312
@NgModule({
1413
imports: [
15-
CommonModule,
16-
],
17-
declarations: [
1814
GridstackComponent,
1915
GridstackItemComponent,
2016
],
@@ -23,10 +19,4 @@ import { GridstackItemComponent } from "./gridstack-item.component";
2319
GridstackItemComponent,
2420
],
2521
})
26-
export class GridstackModule {
27-
constructor() {
28-
// set globally our method to create the right widget type
29-
GridStack.addRemoveCB = gsCreateNgComponents;
30-
GridStack.saveCB = gsSaveAdditionalNgInfo;
31-
}
32-
}
22+
export class GridstackModule {}

0 commit comments

Comments
 (0)