gridstack-profile/angular/projects/demo/src/app/app.component.html

TypeScript/JS lib for dashboard layout and creation, responsive, mobile support, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)

<div class="button-container">
  <p class="pick-info">Pick a demo to load:</p>
  <button (click)="onShow(0)" [class.active]="show===0">Simple</button>
  <button (click)="onShow(1)" [class.active]="show===1">ngFor case</button>
  <button (click)="onShow(2)" [class.active]="show===2">ngFor custom command</button>
  <button (click)="onShow(3)" [class.active]="show===3">Component HTML template</button>
  <button (click)="onShow(4)" [class.active]="show===4">Component ngFor</button>
  <button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
  <button (click)="onShow(6)" [class.active]="show===6">Nested Grid</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>

<div *ngIf="show===3">
  <p><b>COMPONENT template</b>: using DOM template to use components statically</p>
  <button (click)="add()">add item</button>
  <button (click)="delete()">remove item</button>
  <button (click)="modify()">modify item</button>
  <button (click)="newLayout()">new layout</button>
  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    <gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
    <gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
  </gridstack>
</div>

<div *ngIf="show===4">
  <p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
  <button (click)="addNgFor()">add item</button>
  <button (click)="deleteNgFor()">remove item</button>
  <button (click)="modifyNgFor()">modify item</button>
  <button (click)="newLayoutNgFor()">new layout</button>
  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
    </gridstack-item>
  </gridstack>
</div>

<div *ngIf="show===5">
  <p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
  <button (click)="add()">add item</button>
  <button (click)="delete()">remove item</button>
  <button (click)="modify()">modify item</button>
  <button (click)="newLayout()">new layout</button>
  <button (click)="saveGrid()">Save</button>
  <button (click)="clearGrid()">Clear</button>
  <button (click)="loadGrid()">Load</button>
  <gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
  </gridstack>
</div>


<div *ngIf="show===6">
  <p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
  <button (click)="add()">add item</button>
  <button (click)="delete()">remove item</button>
  <button (click)="modify()">modify item</button>
  <button (click)="newLayout()">new layout</button>
  <button (click)="saveGrid()">Save</button>
  <button (click)="clearGrid()">Clear</button>
  <button (click)="loadGrid()">Load</button>
  <!-- TODO: addGrid() in code for testing instead ? -->
  <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    <div empty-content>Add items here or reload the grid</div>
  </gridstack>
</div>

<div class="grid-container"></div>

<div class="text-container">
  <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
  <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
</div>

</div>