Angular wrapper around the Muuri JavaScript library. Only supported on Angular 9 and newer versions.
Do you have any requests or improvements? Feel free to create an issue or PR.
Install the library with the following commands:
npm install --save muuri muuri-angular
Add MuuriModule as an import to your app.module.ts:
import { MuuriModule } from 'muuri-angular';
@NgModule({
declarations: [...],
imports: [
...
MuuriModule
],
providers: [],
bootstrap: [...]
})
export class AppModule { }app.component.html
<button id="add-item-button" (click)="addToGrid()">+ Add new block</button>
<br><br>
<div #grid class="grid" muuriGrid [config]="layoutConfig">
<div class="grid-item" muuriGridItem *ngFor="let item of blockItems">
<div class="grid-item-content">
{{ item }}
</div>
</div>
</div>app.component.ts
import { Component } from '@angular/core';
import { GridOptions } from 'muuri';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
blockItems: string[] = ['test', 'test2'];
// Add any options you'd like to set here
public layoutConfig: GridOptions = {
items: [],
layoutOnInit: false,
dragEnabled: true,
layout: {
fillGaps: true,
horizontal: false,
alignRight: false,
alignBottom: false,
rounding: true
}
};
addToGrid() {
this.blockItems.push('hello');
}
}Muuri exposes many events that you can subscribe to. You can get the Grid object as follows:
app.component.html
<div muuriGrid (gridCreated)="onGridCreated($event)"></div>app.component.ts
import Grid from '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);
});
}You can also get a grid item when it is created:
app.component.html
<div muuriGridItem (itemCreated)="onItemCreated($event)"></div>app.component.ts
import Item from 'muuri';
onItemCreated(item: Item) {
// Now you can do anything you want with the grid item
}If you want to help developing this library, please do the following to set up your local environment:
- Set up a project that uses
muuri-angularas a dependency. - Clone this repo (
muuri-angular). - Run
npm install. - Run
npm run build:ivy. This will build an Ivy-compatible library that you can use in Angular 9+ projects locally.- If you're still using Angular 8 or lower in your project, run
npm run build:prodinstead. This will use Angular's legacy View Engine to build the library.
- If you're still using Angular 8 or lower in your project, run
- Run
cd dist/muuri-angular. - Run
npm link. - In your project, run
npm link muuri-angular. Your project will now use the localmuuri-angularcode. - Run
npm run build:ivy -- --watchso that the library gets rebuilt on every code change 😃
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent