Getting started

Basic Usage

import{MuuriModule}from'muuri-angular';@NgModule({declarations:[...],imports:[    ...MuuriModule],providers:[],bootstrap:[...]})exportclassAppModule{}

<buttonid="add-item-button"(click)="addToGrid()">+ Add new block</button><br><br><div#gridclass="grid"muuriGrid[config]="layoutConfig"><divclass="grid-item"muuriGridItem*ngFor="let item of blockItems"><divclass="grid-item-content">            {{ item }}</div></div></div>

import{Component}from'@angular/core';import{GridOptions}from'muuri';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.scss']})exportclassAppComponent{blockItems:string[]=['test','test2'];// Add any options you'd like to set herepubliclayoutConfig:GridOptions={items:[],layoutOnInit:false,dragEnabled:true,layout:{fillGaps:true,horizontal:false,alignRight:false,alignBottom:false,rounding:true}};addToGrid(){this.blockItems.push('hello');}}

Advanced usage

Events

<divmuuriGrid(gridCreated)="onGridCreated($event)"></div>

importGridfrom'muuri';onGridCreated(grid:Grid){/**   * Now you can do everything you want with the Grid object,   * like subcribing to Muuri's events   */grid.on('add',function(items){console.log(items);});}

<divmuuriGridItem(itemCreated)="onItemCreated($event)"></div>

importItemfrom'muuri';onItemCreated(item:Item){// Now you can do anything you want with the grid item}

Contributing