-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2130 from adumesny/master
Complete Angular wrapper
- Loading branch information
Showing
11 changed files
with
257 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
# Angular wrapper | ||
|
||
The Angular [wrapper component](./gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [NgFor](./ngFor.ts) or [Simple](./simple.ts) demos are also given. | ||
|
||
## Usage | ||
|
||
Code | ||
|
||
```typescript | ||
import { GridStackOptions, GridStackWidget } from 'gridstack'; | ||
import { GridstackComponent, nodesCB } from './gridstack.component'; | ||
|
||
/** sample grid options and items to load... */ | ||
public gridOptions: GridStackOptions = { | ||
margin: 5, | ||
float: true, | ||
} | ||
public items: GridStackWidget[] = [ | ||
{x:0, y:0, minW:2}, | ||
{x:1, y:1}, | ||
{x:2, y:2}, | ||
]; | ||
|
||
// called whenever items change size/position/etc.. | ||
public onChange(data: nodesCB) { | ||
console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]); | ||
} | ||
|
||
// ngFor unique node id to have correct match between our items used and GS | ||
public identify(index: number, w: GridStackWidget) { | ||
return w.id; | ||
} | ||
``` | ||
HTML | ||
```angular2html | ||
<gridstack [options]="gridOptions" (changeCB)="onChange($event)"> | ||
<gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"> | ||
Hello | ||
</gridstack-item> | ||
</gridstack> | ||
``` | ||
|
||
## Demo | ||
You can see a fuller example at [app.component](https://github.com/gridstack/gridstack.js/blob/master/demo/angular/src/app/app.component.ts). | ||
|
||
to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate to `http://localhost:4200/` | ||
|
||
### Caveats | ||
|
||
- This wrapper needs v7.1.2+ to run as it needs the latest changes | ||
- This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update, you must manually call the `Gridstack.update()` method directly. | ||
- The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so now. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,28 @@ | ||
|
||
<div> | ||
<p>Pick a sample test case to load:</p> | ||
<p>Pick a demo to load:</p> | ||
<button (click)="show=0">Simple</button> | ||
<button (click)="show=1">ngFor case</button> | ||
<button (click)="show=2">ngFor custom command</button> | ||
<button (click)="show=3">component</button> | ||
<button (click)="show=3">Component</button> | ||
</div> | ||
|
||
<div class="test-container"> | ||
<angular-simple-test *ngIf="show===0"></angular-simple-test> | ||
<angular-ng-for-test *ngIf="show===1"></angular-ng-for-test> | ||
<angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test> | ||
|
||
<gridstack *ngIf="show===3" [options]="gridstackConfig" (changeCB)="onChange($event)" (resizestopCB)="onResizeStop($event)"> | ||
<gridstack-item [id]="'a'" [x]="0" [y]="0" [w]="6" [h]="4" [minH]="2" [minW]="3"> | ||
HELLO | ||
</gridstack-item> | ||
</gridstack> | ||
<div *ngIf="show===3" > | ||
<p><b>COMPONENT</b>: Most complete example that uses Component wrapper for grid and gridItem</p> | ||
<button (click)="add(grid)">add item</button> | ||
<button (click)="delete(grid)">remove item</button> | ||
<button (click)="change(grid)">modify item</button> | ||
<button (click)="newLayout(grid)">new layout</button> | ||
<gridstack #grid [options]="gridOptions" (changeCB)="onChange($event)" (resizestopCB)="onResizeStop($event)"> | ||
<gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"> | ||
{{n.content}} | ||
</gridstack-item> | ||
</gridstack> | ||
</div> | ||
|
||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,80 @@ | ||
import { Component } from '@angular/core'; | ||
import { GridStackOptions } from 'gridstack'; | ||
import { elementCB, nodesCB } from './gridstack.component'; | ||
import { GridStackOptions, GridStackWidget } from 'gridstack'; | ||
import { GridstackComponent, elementCB, nodesCB } from './gridstack.component'; | ||
|
||
// unique ids sets for each item for correct ngFor updating | ||
let ids = 1; | ||
@Component({ | ||
selector: 'app-root', | ||
templateUrl: './app.component.html', | ||
styleUrls: ['./app.component.css'] | ||
}) | ||
export class AppComponent { | ||
// which sample to show | ||
show = 1; | ||
show = 3; | ||
|
||
public gridstackConfig: GridStackOptions = { | ||
/** sample grid options and items to load... */ | ||
public gridOptions: GridStackOptions = { | ||
margin: 5, | ||
float: true, | ||
} | ||
public items: GridStackWidget[] = [ | ||
{x: 0, y: 0, minW: 2}, | ||
{x: 1, y: 1}, | ||
{x: 2, y: 2}, | ||
]; | ||
|
||
public onChange(h: nodesCB) { | ||
console.log('change ', h.nodes.length > 1 ? h.nodes : h.nodes[0]); | ||
constructor() { | ||
// give them content and unique id to make sure we track them during changes below... | ||
this.items.forEach(w => { | ||
w.content = `item ${ids}`; | ||
w.id = String(ids++); | ||
}) | ||
} | ||
|
||
public onResizeStop(h: elementCB) { | ||
console.log('resizestop ', h.el.gridstackNode); | ||
/** called whenever items change size/position/etc.. */ | ||
public onChange(data: nodesCB) { | ||
console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]); | ||
// TODO: update our list to match ? | ||
} | ||
|
||
public onResizeStop(data: elementCB) { | ||
console.log('resizestop ', data.el.gridstackNode); | ||
} | ||
|
||
/** | ||
* CRUD TEST operations | ||
*/ | ||
public add(comp: GridstackComponent) { | ||
// new array isn't required as Angular seem to detect changes to content | ||
// this.items = [...this.items, { x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++) }]; | ||
this.items.push({ x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++)}); | ||
} | ||
|
||
public delete(comp: GridstackComponent) { | ||
this.items.pop(); | ||
} | ||
|
||
public change(comp: GridstackComponent) { | ||
// this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so call GS update() instead | ||
// this.items[0].w = 3; | ||
// comp.updateAll(); | ||
const n = comp.grid?.engine.nodes[0]; | ||
if (n?.el) comp.grid?.update(n.el, {w:3}); | ||
} | ||
|
||
/** test updating existing and creating new one */ | ||
public newLayout(comp: GridstackComponent) { | ||
this.items = [ | ||
{x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain | ||
{x:1, y:1, id:'2'}, | ||
// {x:2, y:1, id:'3'}, // delete item | ||
{x:3, y:0, w:3, content:'new item'}, // new item | ||
]; | ||
} | ||
|
||
// ngFor unique node id to have correct match between our items used and GS | ||
public identify(index: number, w: GridStackWidget) { | ||
return w.id; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.