jaumard/ngx-dashboard

<h1>
  {{title}}
</h1>
<button (click)="addWidget()">Add widget</button>
<br><br>
<dashboard (onOrderChange)="logOrder($event)" (onDragStart)="log($event, 'ondragstart')"
           (onDragEnd)="log($event, 'ondragend')"
           (onDrag)="log($event, 'ondragmove')" class="dashboard" [widgetsSize]="widgetsSize"
           [margin]="dashboardMargin">

  <widget [size]="[2, 2]" widgetId="big" class="handle">
    <div class="head">Big widget [2, 2]</div>
  </widget>
  <!--widget [size]="[1, 1]" widgetId="small" class="handle">
    <div class="head">Small widget [1, 1]</div>
  </widget>
  <widget [size]="[1, 1]" widgetId="small2" class="handle">
    <div class="head">Small widget [1, 1]</div>
  </widget>
  <!--widget [size]="[1, 1]" widgetId="small3" class="handle">
    <div class="head">Small widget [1, 1]</div>
  </widget>

  <widget [size]="[2, 3]" widgetId="big2" class="handle">
    <div class="head">Big widget [2, 3]</div>
  </widget>
  <widget [size]="[1, 1]" widgetId="small4" class="handle">
    <div class="head">Small widget [1, 1]</div>
  </widget>
  <widget [size]="[1, 1]" widgetId="small5" class="handle">
    <div class="head">Small widget [1, 1]</div>
  </widget-->

  <widget [size]="[2, 3]" widgetId="large">
    <div widgetHandle class="head handle">Large widget [2, 1] handle only on text</div>
  </widget>
  <widget [size]="[1, 2]" widgetId="tall">
    <div widgetHandle class="head handle">Tall widget [1, 2] handle only on text</div>
  </widget>
  <widget widgetId="small" class="handle">
    <div class="head">Small widget [1, 1]</div>
  </widget>
  <widget [size]="[2, 2]" widgetId="big" class="handle">
    <div class="head">Big widget [2, 2]</div>
  </widget>
  <widget *ngFor="let item of [1, 2, 3, 4, 5, 6]; let i = index;" [widgetId]="i" class="handle">
    <div class="head">Widget {{i}} [1, 1]</div>
    <div class="close" (click)="close($event, i)">X</div>
  </widget>

</dashboard>