Introduce Events feature, bump version to 0.1.0

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
+<div muuriGrid (gridCreated)="onGridCreated($event)"></div>
+```
+
+`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.

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",

projects/muuri-angular/src/lib/muuri-grid.directive.ts

@@ -1,12 +1,13 @@
-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({
     selector: '[muuriGrid]'
 })
 export class MuuriGridDirective implements OnInit, OnDestroy {
     @Input() config: GridOptions;
-    layout: Grid;
+    @Output() gridCreated: EventEmitter<Grid> = 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 {