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

Skip to content

Commit b0ef45a

Browse files
adumesnyadumesny
authored
Merge pull request gridstack#2200 from adumesny/master
angular demo update
2 parents a6b478d + 5cd027d commit b0ef45a

File tree

3 files changed

+31
-28
lines changed

3 files changed

+31
-28
lines changed

‎demo/angular/src/app/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ public onChange(data: nodesCB) {
3131
```
3232
HTML
3333
```html
34-
<gridstack [options]="gridOptions" (changeGS)="onChange($event)">
34+
<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
3535
</gridstack>
3636
```
3737

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<button (click)="delete(gridComp)">remove item</button>
2121
<button (click)="modify(gridComp)">modify item</button>
2222
<button (click)="newLayout(gridComp)">new layout</button>
23-
<gridstack #gridComp [options]="gridOptions" (changeGS)="onChange($event)" (resizestop)="onResizeStop($event)">
23+
<gridstack #gridComp [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
2424
<gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
2525
<gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
2626
</gridstack>
@@ -32,7 +32,7 @@
3232
<button (click)="deleteNgFor()">remove item</button>
3333
<button (click)="modifyNgFor(gridComp)">modify item</button>
3434
<button (click)="newLayoutNgFor()">new layout</button>
35-
<gridstack #gridComp [options]="gridOptions" (changeGS)="onChange($event)" (resizestop)="onResizeStop($event)">
35+
<gridstack #gridComp [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
3636
<gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
3737
{{n.content}}
3838
</gridstack-item>
@@ -45,7 +45,7 @@
4545
<button (click)="delete(gridComp)">remove item</button>
4646
<button (click)="modify(gridComp)">modify item</button>
4747
<button (click)="newLayout(gridComp)">new layout</button>
48-
<gridstack #gridComp [options]="gridOptionsFull" (changeGS)="onChange($event)" (resizestop)="onResizeStop($event)">
48+
<gridstack #gridComp [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
4949
</gridstack>
5050
</div>
5151

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

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,22 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
5353
/** individual list of GridStackEvent callbacks handlers as output
5454
* otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
5555
* see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
56+
*
57+
* Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
58+
* eg: 'change' would trigger the raw CustomEvent so use different name.
5659
*/
57-
@Output() public added = new EventEmitter<nodesCB>();
58-
@Output() public changeGS = new EventEmitter<nodesCB>(); // 'change' would trigger the raw CustomEvent so use different name
59-
@Output() public disable = new EventEmitter<eventCB>();
60-
@Output() public drag = new EventEmitter<elementCB>();
61-
@Output() public dragstart = new EventEmitter<elementCB>();
62-
@Output() public dragstop = new EventEmitter<elementCB>();
63-
@Output() public dropped = new EventEmitter<droppedCB>();
64-
@Output() public enable = new EventEmitter<eventCB>();
65-
@Output() public removed = new EventEmitter<nodesCB>();
66-
@Output() public resize = new EventEmitter<elementCB>();
67-
@Output() public resizestart = new EventEmitter<elementCB>();
68-
@Output() public resizestop = new EventEmitter<elementCB>();
60+
@Output() public addedCB = new EventEmitter<nodesCB>();
61+
@Output() public changeCB = new EventEmitter<nodesCB>();
62+
@Output() public disableCB = new EventEmitter<eventCB>();
63+
@Output() public dragCB = new EventEmitter<elementCB>();
64+
@Output() public dragStartCB = new EventEmitter<elementCB>();
65+
@Output() public dragStopCB = new EventEmitter<elementCB>();
66+
@Output() public droppedCB = new EventEmitter<droppedCB>();
67+
@Output() public enableCB = new EventEmitter<eventCB>();
68+
@Output() public removedCB = new EventEmitter<nodesCB>();
69+
@Output() public resizeCB = new EventEmitter<elementCB>();
70+
@Output() public resizeStartCB = new EventEmitter<elementCB>();
71+
@Output() public resizeStopCB = new EventEmitter<elementCB>();
6972

7073
/** return the native element that contains grid specific fields as well */
7174
public get el(): GridHTMLElement { return this.elementRef.nativeElement; }
@@ -141,18 +144,18 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
141144
private hookEvents(grid?: GridStack) {
142145
if (!grid) return;
143146
grid
144-
.on('added', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => { this.checkEmpty(); this.added.emit({event, nodes}); }))
145-
.on('change', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => this.changeGS.emit({event, nodes})))
146-
.on('disable', (event: Event) => this.ngZone.run(() => this.disable.emit({event})))
147-
.on('drag', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.drag.emit({event, el})))
148-
.on('dragstart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragstart.emit({event, el})))
149-
.on('dragstop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragstop.emit({event, el})))
150-
.on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.ngZone.run(() => this.dropped.emit({event, previousNode, newNode})))
151-
.on('enable', (event: Event) => this.ngZone.run(() => this.enable.emit({event})))
152-
.on('removed', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => { this.checkEmpty(); this.removed.emit({event, nodes}); }))
153-
.on('resize', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resize.emit({event, el})))
154-
.on('resizestart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizestart.emit({event, el})))
155-
.on('resizestop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizestop.emit({event, el})))
147+
.on('added', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => { this.checkEmpty(); this.addedCB.emit({event, nodes}); }))
148+
.on('change', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => this.changeCB.emit({event, nodes})))
149+
.on('disable', (event: Event) => this.ngZone.run(() => this.disableCB.emit({event})))
150+
.on('drag', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragCB.emit({event, el})))
151+
.on('dragstart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragStartCB.emit({event, el})))
152+
.on('dragstop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragStopCB.emit({event, el})))
153+
.on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.ngZone.run(() => this.droppedCB.emit({event, previousNode, newNode})))
154+
.on('enable', (event: Event) => this.ngZone.run(() => this.enableCB.emit({event})))
155+
.on('removed', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => { this.checkEmpty(); this.removedCB.emit({event, nodes}); }))
156+
.on('resize', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizeCB.emit({event, el})))
157+
.on('resizestart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizeStartCB.emit({event, el})))
158+
.on('resizestop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizeStopCB.emit({event, el})))
156159
}
157160

158161
/** called by GS when a new item needs to be created, which we do as a Angular component, or deleted (skip) */

0 commit comments

Comments
 (0)