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