Skip to content

Commit d02c0ca

Browse files
adumesnyadumesny
authored
Merge pull request #2191 from adumesny/master
Angular wrapper fix - HTML template
2 parents dfe2a28 + be6a053 commit d02c0ca

File tree

6 files changed

+24
-8
lines changed

6 files changed

+24
-8
lines changed

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
<button (click)="show=0">Simple</button>
55
<button (click)="show=1">ngFor case</button>
66
<button (click)="show=2">ngFor custom command</button>
7-
<button (click)="show=3">Component ngFor</button>
8-
<button (click)="show=4">Component Dynamic</button>
7+
<button (click)="show=3">Component HTML template</button>
8+
<button (click)="show=4">Component ngFor</button>
9+
<button (click)="show=5">Component Dynamic</button>
910
</div>
1011

1112
<div class="test-container">
@@ -14,6 +15,18 @@
1415
<angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test>
1516

1617
<div *ngIf="show===3" >
18+
<p><b>COMPONENT template</b>: using DOM template to use components statically</p>
19+
<button (click)="add(gridComp)">add item</button>
20+
<button (click)="delete(gridComp)">remove item</button>
21+
<button (click)="modify(gridComp)">modify item</button>
22+
<button (click)="newLayout(gridComp)">new layout</button>
23+
<gridstack #gridComp [options]="gridOptions" (changeGS)="onChange($event)" (resizestop)="onResizeStop($event)">
24+
<gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
25+
<gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
26+
</gridstack>
27+
</div>
28+
29+
<div *ngIf="show===4" >
1730
<p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
1831
<button (click)="addNgFor()">add item</button>
1932
<button (click)="deleteNgFor()">remove item</button>
@@ -26,7 +39,7 @@
2639
</gridstack>
2740
</div>
2841

29-
<div *ngIf="show===4" >
42+
<div *ngIf="show===5" >
3043
<p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
3144
<button (click)="add(gridComp)">add item</button>
3245
<button (click)="delete(gridComp)">remove item</button>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ let ids = 1;
1111
})
1212
export class AppComponent {
1313
// which sample to show
14-
public show = 4;
14+
public show = 5;
1515

1616
/** sample grid options and items to load... */
1717
public items: GridStackWidget[] = [

‎demo/angular/src/app/gridstack-item.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export class GridstackItemComponent {
3636
}
3737
/** return the latest grid options (from GS once built, otherwise initial values) */
3838
public get options(): GridStackNode {
39-
return this.el.gridstackNode || this._options || {};
39+
return this.el.gridstackNode || this._options || {el: this.el};
4040
}
4141

4242
private _options?: GridStackNode;

‎demo/angular/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>AngularNgFor</title>
5+
<title>Angular Component</title>
66
<base href="/">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" type="image/x-icon" href="favicon.ico">

‎doc/CHANGES.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ Change log
8080

8181
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8282

83+
## 7.2.2-dev (TBD)
84+
* fix `addWidget()` to handle passing just {el} which was needed for Angular HMTL template demo
85+
8386
## 7.2.2 (2023-01-16)
8487
* fix [#2171](https://github.com/gridstack/gridstack.js/issues/2171) `save()` nested grid has extra nested children & options
8588
* regression for fix #2110: nested grids lost their styles causing wrong rendering when dragging to create sub nesting

‎src/gridstack.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -406,8 +406,8 @@ export class GridStack {
406406
* @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
407407
*/
408408
public addWidget(els?: GridStackWidget | GridStackElement, options?: GridStackWidget): GridItemHTMLElement {
409-
function isGridStackWidget(w: GridStackWidget): w is GridStackWidget { // https://medium.com/ovrsea/checking-the-type-of-an-object-in-typescript-the-type-guards-24d98d9119b0
410-
return w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
409+
function isGridStackWidget(w: GridStackNode): w is GridStackNode { // https://medium.com/ovrsea/checking-the-type-of-an-object-in-typescript-the-type-guards-24d98d9119b0
410+
return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
411411
}
412412

413413
let el: HTMLElement;

0 commit comments

Comments
 (0)