diff --git a/README.md b/README.md index 169a1c0..ef17076 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Install the library with the following commands: `npm install --save muuri muuri-angular` -## Usage +## Basic Usage Add `MuuriModule` as an import to your `app.module.ts`: @@ -79,6 +79,34 @@ export class AppComponent { } ``` +## Advanced usage + +### Events + +Muuri exposes many [events](https://github.com/haltu/muuri#grid-events) that you can subscribe to. You can get the `Grid` object as follows: + +`app.component.html` + +```HTML +
+``` + +`app.component.ts` + +```TypeScript +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); + }); +} +``` + ## Contributing 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-angular` as a dependency. diff --git a/projects/muuri-angular/package.json b/projects/muuri-angular/package.json index f695c4b..4861fd2 100644 --- a/projects/muuri-angular/package.json +++ b/projects/muuri-angular/package.json @@ -4,7 +4,7 @@ "author": { "name": "Dennis Ameling" }, - "version": "0.0.6", + "version": "0.1.0", "peerDependencies": { "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", diff --git a/projects/muuri-angular/src/lib/muuri-grid.directive.ts b/projects/muuri-angular/src/lib/muuri-grid.directive.ts index 568ea15..b887db2 100644 --- a/projects/muuri-angular/src/lib/muuri-grid.directive.ts +++ b/projects/muuri-angular/src/lib/muuri-grid.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, OnDestroy, OnInit, Input } from '@angular/core'; +import { Directive, ElementRef, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core'; import Grid, { GridOptions } from 'muuri'; @Directive({ @@ -6,7 +6,8 @@ import Grid, { GridOptions } from 'muuri'; }) export class MuuriGridDirective implements OnInit, OnDestroy { @Input() config: GridOptions; - layout: Grid; + @Output() gridCreated: EventEmitter = new EventEmitter(); + gridObject?: Grid; constructor(private elRef: ElementRef) {} @@ -18,23 +19,24 @@ export class MuuriGridDirective implements OnInit, OnDestroy { * Initialize the grid. */ init(grid: ElementRef): void { - this.layout = new Grid(grid.nativeElement, this.config); + this.gridObject = new Grid(grid.nativeElement, this.config); + this.gridCreated.emit(this.gridObject); } /** * Add a new item to the grid. */ addItem(item: ElementRef): void { - this.layout.add(item.nativeElement); + this.gridObject.add(item.nativeElement); } destroyLayout(): void { - this.layout.destroy(); - this.layout = null; + this.gridObject.destroy(); + this.gridObject = null; } refresh(): void { - this.layout.refreshItems(); + this.gridObject.refreshItems(); } ngOnDestroy(): void {