Skip to content

Commit ee85523

Browse files
adumesnyadumesny
committed
using angular 17 demo syntax
* demos are using new syntax, readme has both * left the wrapper angular 14-18+ compatible.
1 parent 815ff83 commit ee85523

File tree

4 files changed

+135
-128
lines changed

4 files changed

+135
-128
lines changed

‎angular/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,11 @@ HTML
129129

130130
```html
131131
<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
132+
<!-- Angular 17+ -->
133+
@for (n of items; track n.id) {
134+
<gridstack-item [options]="n">Item {{n.id}}</gridstack-item>
135+
}
136+
<!-- Angular 16 -->
132137
<gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"> Item {{n.id}} </gridstack-item>
133138
</gridstack>
134139
```

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

Lines changed: 103 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -14,111 +14,116 @@
1414
</div>
1515

1616
<div class="test-container">
17-
<angular-simple-test *ngIf="show===0"></angular-simple-test>
18-
<angular-ng-for-test *ngIf="show===1"></angular-ng-for-test>
19-
<angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test>
20-
21-
<div *ngIf="show===3">
22-
<p><b>COMPONENT template</b>: using DOM template to use components statically</p>
23-
<button (click)="add()">add item</button>
24-
<button (click)="delete()">remove item</button>
25-
<button (click)="modify()">modify item</button>
26-
<button (click)="newLayout()">new layout</button>
27-
<gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
28-
<gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
29-
<gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
30-
</gridstack>
31-
</div>
32-
33-
<div *ngIf="show===4">
34-
<p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
35-
<button (click)="addNgFor()">add item</button>
36-
<button (click)="deleteNgFor()">remove item</button>
37-
<button (click)="modifyNgFor()">modify item</button>
38-
<button (click)="newLayoutNgFor()">new layout</button>
39-
<gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
40-
<gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
41-
</gridstack-item>
42-
</gridstack>
43-
</div>
44-
45-
<div *ngIf="show===5">
46-
<p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
47-
<button (click)="add()">add item</button>
48-
<button (click)="delete()">remove item</button>
49-
<button (click)="modify()">modify item</button>
50-
<button (click)="newLayout()">new layout</button>
51-
<button (click)="saveGrid()">Save</button>
52-
<button (click)="clearGrid()">Clear</button>
53-
<button (click)="loadGrid()">Load</button>
54-
<gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
55-
</gridstack>
56-
</div>
57-
58-
59-
<div *ngIf="show===6">
60-
<p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
61-
<button (click)="add()">add item</button>
62-
<button (click)="delete()">remove item</button>
63-
<button (click)="modify()">modify item</button>
64-
<button (click)="newLayout()">new layout</button>
65-
<button (click)="saveGrid()">Save</button>
66-
<button (click)="clearGrid()">Clear</button>
67-
<button (click)="loadGrid()">Load</button>
68-
<!-- add .grid-stack-item for acceptWidgets:true -->
69-
<div class="sidebar-item grid-stack-item">Drag nested</div>
70-
<div class="sidebar-item grid-stack-item">Comp N nested</div>
71-
72-
<!-- TODO: addGrid() in code for testing instead ? -->
73-
<gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
74-
<div empty-content>Add items here or reload the grid</div>
75-
</gridstack>
76-
</div>
17+
@if (show===0) {
18+
<angular-simple-test></angular-simple-test>
19+
} @else if (show===1) {
20+
<angular-ng-for-test></angular-ng-for-test>
21+
} @else if (show===2) {
22+
<angular-ng-for-cmd-test></angular-ng-for-cmd-test>
23+
} @else if (show===3) {
24+
<div>
25+
<p><b>COMPONENT template</b>: using DOM template to use components statically</p>
26+
<button (click)="add()">add item</button>
27+
<button (click)="delete()">remove item</button>
28+
<button (click)="modify()">modify item</button>
29+
<button (click)="newLayout()">new layout</button>
30+
<gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
31+
<gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
32+
<gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
33+
</gridstack>
34+
</div>
35+
} @else if (show===4) {
36+
<div>
37+
<p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
38+
<button (click)="addNgFor()">add item</button>
39+
<button (click)="deleteNgFor()">remove item</button>
40+
<button (click)="modifyNgFor()">modify item</button>
41+
<button (click)="newLayoutNgFor()">new layout</button>
42+
<gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
43+
@for (n of items; track n.id) {
44+
<gridstack-item [options]="n"></gridstack-item>
45+
}
46+
</gridstack>
47+
</div>
48+
} @else if (show===5) {
49+
<div>
50+
<p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
51+
<button (click)="add()">add item</button>
52+
<button (click)="delete()">remove item</button>
53+
<button (click)="modify()">modify item</button>
54+
<button (click)="newLayout()">new layout</button>
55+
<button (click)="saveGrid()">Save</button>
56+
<button (click)="clearGrid()">Clear</button>
57+
<button (click)="loadGrid()">Load</button>
58+
<gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
59+
</gridstack>
60+
</div>
61+
} @else if (show===6) {
62+
<div>
63+
<p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
64+
<button (click)="add()">add item</button>
65+
<button (click)="delete()">remove item</button>
66+
<button (click)="modify()">modify item</button>
67+
<button (click)="newLayout()">new layout</button>
68+
<button (click)="saveGrid()">Save</button>
69+
<button (click)="clearGrid()">Clear</button>
70+
<button (click)="loadGrid()">Load</button>
71+
<!-- add .grid-stack-item for acceptWidgets:true -->
72+
<div class="sidebar-item grid-stack-item">Drag nested</div>
73+
<div class="sidebar-item grid-stack-item">Comp N nested</div>
7774

78-
<div *ngIf="show===7">
79-
<p><b>two.html</b>: shows multiple grids, sidebar creating Components</p>
80-
<div class="row">
81-
<div class="col-md-6">
82-
<div class="sidebar">
83-
<div class="sidebar-item grid-stack-item">will be A</div>
84-
<div class="sidebar-item grid-stack-item">will be B max=3</div>
85-
</div>
75+
<!-- TODO: addGrid() in code for testing instead ? -->
76+
<gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
77+
<div empty-content>Add items here or reload the grid</div>
78+
</gridstack>
8679
</div>
87-
<div class="col-md-6">
88-
<div class="trash" id="trash">
80+
} @else if (show===7) {
81+
<div>
82+
<p><b>two.html</b>: shows multiple grids, sidebar creating Components</p>
83+
<div class="row">
84+
<div class="col-md-6">
85+
<div class="sidebar">
86+
<div class="sidebar-item grid-stack-item">will be A</div>
87+
<div class="sidebar-item grid-stack-item">will be B max=3</div>
88+
</div>
89+
</div>
90+
<div class="col-md-6">
91+
<div class="trash" id="trash">
92+
</div>
93+
</div>
94+
</div>
95+
<div class="row" style="margin-top: 20px">
96+
<div class="col-md-6">
97+
<gridstack [options]="twoGridOpt1"></gridstack>
98+
</div>
99+
<div class="col-md-6">
100+
<gridstack [options]="twoGridOpt2"></gridstack>
101+
</div>
89102
</div>
90103
</div>
91-
</div>
92-
<div class="row" style="margin-top: 20px">
93-
<div class="col-md-6">
94-
<gridstack [options]="twoGridOpt1"></gridstack>
104+
} @else if (show===8) {
105+
<div>
106+
<p>delay loading of components</p>
107+
<div style="height: 120px; overflow-y: auto">
108+
<gridstack [options]="gridOptionsDelay"></gridstack>
109+
</div>
95110
</div>
96-
<div class="col-md-6">
97-
<gridstack [options]="twoGridOpt2"></gridstack>
111+
} @else if (show===9) {
112+
<div>
113+
<p>load() + clear() to memory leak test between the two</p>
114+
<button (click)="clearGrid()">Clear</button>
115+
<button (click)="load(sub0)">load</button>
116+
<button (click)="load(sub2)">load 2</button>
117+
<gridstack [options]="gridOptions"></gridstack>
98118
</div>
99-
</div>
100-
</div>
101119

102-
<div *ngIf="show===8">
103-
<p>delay loading of components</p>
104-
<div style="height: 120px; overflow-y: auto">
105-
<gridstack [options]="gridOptionsDelay"></gridstack>
106-
</div>
107-
</div>
120+
<div class="grid-container"></div>
108121

109-
<div *ngIf="show===9">
110-
<p>load() + clear() to memory leak test between the two</p>
111-
<button (click)="clearGrid()">Clear</button>
112-
<button (click)="load(sub0)">load</button>
113-
<button (click)="load(sub2)">load 2</button>
114-
<gridstack [options]="gridOptions"></gridstack>
115-
</div>
116-
117-
<div class="grid-container"></div>
118-
119-
<div class="text-container" *ngIf="show!=8">
120-
<textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
121-
<textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
122-
</div>
122+
} @else if (show!=8) {
123+
<div class="text-container">
124+
<textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
125+
<textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
126+
</div>
127+
}
123128

124129
</div>

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

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,20 @@ let ids = 1;
2020
<!-- using angular templating to create DOM, otherwise an easier way is to simply call grid.load(items)
2121
NOTE: this example is NOT complete as there are many more properties than listed (minW, maxW, etc....)
2222
-->
23-
<div *ngFor="let n of items; trackBy: identify"
24-
class="grid-stack-item"
25-
[attr.gs-id]="n.id"
26-
[attr.gs-x]="n.x"
27-
[attr.gs-y]="n.y"
28-
[attr.gs-w]="n.w"
29-
[attr.gs-h]="n.h"
30-
#gridStackItem
31-
>
32-
<div class="grid-stack-item-content">item {{ n.id }}</div>
33-
</div>
23+
@for (n of items; track n.id) {
24+
<div
25+
class="grid-stack-item"
26+
[attr.gs-id]="n.id"
27+
[attr.gs-x]="n.x"
28+
[attr.gs-y]="n.y"
29+
[attr.gs-w]="n.w"
30+
[attr.gs-h]="n.h"
31+
#gridStackItem>
32+
<div class="grid-stack-item-content">item {{ n.id }}</div>
33+
</div>
34+
}
3435
</div>
35-
`,
36+
`,
3637
// gridstack.min.css and other custom styles should be included in global styles.scss or here
3738
})
3839
export class AngularNgForTestComponent implements AfterViewInit {
@@ -123,9 +124,4 @@ export class AngularNgForTestComponent implements AfterViewInit {
123124
{x:3, y:0, w:3}, // new item
124125
];
125126
}
126-
127-
// ngFor unique node id to have correct match between our items used and GS
128-
identify(index: number, w: GridStackWidget) {
129-
return w.id;
130-
}
131127
}

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,21 @@ import { GridItemHTMLElement, GridStack, GridStackWidget } from 'gridstack';
1717
<button (click)="modify()">modify item</button>
1818
<div class="grid-stack">
1919
<!-- using angular templating to create DOM, otherwise an easier way is to simply call grid.load(items) -->
20-
<div
21-
*ngFor="let n of items; let i = index; trackBy: identify"
22-
[id]="i"
23-
class="grid-stack-item"
24-
[attr.gs-x]="n.x"
25-
[attr.gs-y]="n.y"
26-
[attr.gs-w]="n.w"
27-
[attr.gs-h]="n.h"
28-
#gridStackItem
29-
>
30-
<div class="grid-stack-item-content">item {{ i }}</div>
31-
</div>
20+
@for (n of items; track n.id; let i = $index) {
21+
<div
22+
[id]="i"
23+
class="grid-stack-item"
24+
[attr.gs-x]="n.x"
25+
[attr.gs-y]="n.y"
26+
[attr.gs-w]="n.w"
27+
[attr.gs-h]="n.h"
28+
#gridStackItem
29+
>
30+
<div class="grid-stack-item-content">item {{ i }}</div>
31+
</div>
32+
}
3233
</div>
33-
`,
34+
`,
3435
// gridstack.min.css and other custom styles should be included in global styles.scss or here
3536
})
3637
export class AngularNgForCmdTestComponent implements AfterViewInit {

0 commit comments

Comments
 (0)