How to emit event from a directive in a component

Question

I am using angular2-grid in my application. Here is the link - https://github.com/BTMorton/angular2-grid

So the NgGrid.d.ts is like -

import { ElementRef, Renderer, EventEmitter, DynamicComponentLoader, KeyValueDiffers, OnInit, OnDestroy, DoCheck, ViewContainerRef } from '@angular/core';
import { NgGridConfig, NgGridItemEvent } from "../interfaces/INgGrid";
import { NgGridItem } from "./NgGridItem";
export declare class NgGrid implements OnInit, DoCheck, OnDestroy {
    private _differs;
    private _ngEl;
    private _renderer;
    private _loader;
    private _containerRef;
    onDragStart: EventEmitter<NgGridItem>;
    onDrag: EventEmitter<NgGridItem>;
    onDragStop: EventEmitter<NgGridItem>;
    onResizeStart: EventEmitter<NgGridItem>;
    onResize: EventEmitter<NgGridItem>;
    onResizeStop: EventEmitter<NgGridItem>;
    onItemChange: EventEmitter<Array<NgGridItemEvent>>;
    colWidth: number;
    rowHeight: number;
    minCols: number;
    minRows: number;
    marginTop: number;
    marginRight: number;
    marginBottom: number;
    marginLeft: number;
    isDragging: boolean;
    isResizing: boolean;
    autoStyle: boolean;
    resizeEnable: boolean;
    dragEnable: boolean;
    cascade: string;
    minWidth: number;
    minHeight: number;
    private _items;
    private _draggingItem;
    private _resizingItem;
    private _resizeDirection;
    private _itemGrid;
    private _containerWidth;
    private _containerHeight;
    private _maxCols;
    private _maxRows;
    private _visibleCols;
    private _visibleRows;
    private _setWidth;
    private _setHeight;
    private _posOffset;
    private _adding;
    private _placeholderRef;
    private _fixToGrid;
    private _autoResize;
    private _differ;
    private _destroyed;
    private _maintainRatio;
    private _aspectRatio;
    private _preferNew;
    private _zoomOnDrag;
    private static CONST_DEFAULT_CONFIG;
    private _config;
    config: NgGridConfig;
    constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer, _loader: DynamicComponentLoader, _containerRef: ViewContainerRef);
    ngOnInit(): void;
    ngOnDestroy(): void;
    setConfig(config: NgGridConfig): void;
    getItemPosition(index: number): {
        col: number;
        row: number;
    };
    getItemSize(index: number): {
        x: number;
        y: number;
    };
    ngDoCheck(): boolean;
    setMargins(margins: Array<string>): void;
    enableDrag(): void;
    disableDrag(): void;
    enableResize(): void;
    disableResize(): void;
    addItem(ngItem: NgGridItem): void;
    removeItem(ngItem: NgGridItem): void;
    updateItem(ngItem: NgGridItem): void;
    triggerCascade(): void;
    private _calculateColWidth();
    private _calculateRowHeight();
    private _updateRatio();
    private _onResize(e);
    private _applyChanges(changes);
    private _onMouseDown(e);
    private _resizeStart(e);
    private _dragStart(e);
    private _zoomOut();
    private _resetZoom();
    private _onMouseMove(e);
    private _drag(e);
    private _resize(e);
    private _onMouseUp(e);
    private _dragStop(e);
    private _resizeStop(e);
    private _maxGridSize(w, h);
    private _calculateGridSize(width, height);
    private _calculateGridPosition(left, top);
    private _hasGridCollision(pos, dims);
    private _getCollisions(pos, dims);
    private _fixGridCollisions(pos, dims);
    private _cascadeGrid(pos?, dims?);
    private _fixGridPosition(pos, dims);
    private _isWithinBoundsX(pos, dims);
    private _isWithinBoundsY(pos, dims);
    private _isWithinBounds(pos, dims);
    private _addToGrid(item);
    private _removeFromGrid(item);
    private _updateSize(col?, row?);
    private _filterGrid();
    private _getMaxRow();
    private _getMaxCol();
    private _getMousePosition(e);
    private _getAbsoluteMousePosition(e);
    private _getItemFromPosition(position);
    private _createPlaceholder(item);
}

Here is my component

import { Component, OnInit ,ViewChild } from '@angular/core';
import {NgGrid, NgGridItem} from 'angular2-grid';

@Component({
  moduleId: module.id,
  selector: 'app-grid',
  templateUrl: 'grid.component.html',
  styleUrls: ['grid.component.css'],
  directives: [NgGrid, NgGridItem]
})
export class GridComponent implements OnInit {
  constructor() { }
  ngOnInit() {

  }


}

My HTML is -

<div class="grid" [ngGrid]="{'max_cols': 3,'max_rows': 3, 'auto_resize': true}">
  <div class="grid-item" [ngGridItem]="{'sizex': 2, 'sizey': 2}">
    <ng-content></ng-content>
  </div>
</div>

The grid is working fine. Now I want to emit an event "onResize" when I resize my grid. Can anyone help me, to emit such events from controller ? What is the best practice to do it ?

Answer 1

You could do it like Günter proposed, but pass the event from the original grid:

export class GridComponent implements OnInit {
    @Output() onResize:EventEmitter = new EventEmitter();

    // ...
}

In the HTML add (onResize)="onResize.emit($event)" to the root grid div, so you pass the original onResize event to your own EventEmitter :

<div class="grid" [ngGrid]="{'max_cols': 3,'max_rows': 3, 'auto_resize': true}" (onResize)="onResize.emit($event)">
  <div class="grid-item" [ngGridItem]="{'sizex': 2, 'sizey': 2}">
    <ng-content></ng-content>
  </div>
</div>

And in the HTML of the component where you use your GridComponent :

<app-grid (onResize)="doSomething()"></app-grid>

Answer 2

export class GridComponent implements OnInit {
    @Output() onResize:EventEmitter = new EventEmitter();

    resize() {
      this.onResize.emit('someValue#);
    }
}

then you can use it like

<app-grid (onResize)="doSomething()"></app-grid>