Is it possible to extend NgGrid and NgGridItem for more specific requirements

[aitipi22]

I am using angular2-grid as the package for the widgets. My company said to me to use that package and also create a new library for some more specific events. I want to know if it is possible to extend the components NgGrid and NgGridItem in order that my new library to inherit the methods and properties of these components

[OnlyAGhost]

Yeah it should be possible to use extends to add some inheritance but I would imagine you could also get away by packaging the angular2-grid items in a new module doing what you want to do.

Like you're looking to extend to support new events or like an outside wrapper for it?

[aitipi22]

I want to support new events which are requirements assigned to me by the company. I would like to know if you know if there is any code in plunker which has used some of the events you have created let say like onItemChange(), onChangeAny() and so on... I would like to take a look how these events can be triggered by an angular application. For now I have used onDragStop, onResizableStart

[OnlyAGhost]

For something like that you’d probably be better off with a wrapper module.

So lets say you have a module, and that module implements the angular2-grid items. Since config is an input to NgGrid you’d have a wrapper around that which either uses a property to fill the config item of NgGrid and you could use the output property with an eventemitter to be able to call onChange of the config. Another option is to have a property on config which is a BehaviorSubject (from rxjs) of the config so you could subscribe to the config for when it is updated. OnItemChange is emitted from NgGrid for changes to items.

It would be up to @BTMorton if it fits into the scope but you could also fork the project and add an output for ConfigChange and use an eventemitter when _config is set then do a pull request to update the project itself to support that event.

[SaberLogic]http://www.saberlogic.com/

brian ellis

sales manager

[http://www.saberlogic.com/images/M_images/sl-icon-linkedin-orange.png]https://www.linkedin.com/in/brianmellis/

[http://www.saberlogic.com/images/M_images/sl-icon-facebook-orange.png]https://www.facebook.com/bezlio/

[http://www.saberlogic.com/images/M_images/sl-icon-twitter-orange.png]https://twitter.com/Bezlio

[http://www.saberlogic.com/images/M_images/sl-icon-google-orange.png]https://plus.google.com/u/2/b/115934345355823038480/115934345355823038480?pageId=115934345355823038480

[http://www.saberlogic.com/images/M_images/sl-icon-youtube-orange.png]https://www.youtube.com/channel/UCVGUTpZafTKMG6-gpDe-UkA

[http://www.saberlogic.com/images/M_images/sl-icon-addresspin-orange.png]

132 main street, wadsworth, oh 44281

[http://www.saberlogic.com/images/M_images/sl-icon-phonehandset-orange.png]

+1 (855) 335-6442 x105

[http://www.saberlogic.com/images/M_images/sl-icon-webglobe-orange.png]

www.saberlogic.comhttp://www.saberlogic.com

[Bezlio - Do you want a customer portal?]https://bezl.io/

From: aitipi22 [mailto:notifications@github.com] Sent: Tuesday, April 11, 2017 9:28 AM To: BTMorton/angular2-grid angular2-grid@noreply.github.com Cc: Brian Ellis bellis@saberlogic.com; Comment comment@noreply.github.com Subject: Re: [BTMorton/angular2-grid] Is it possible to extend NgGrid and NgGridItem for more specific requirements (#224)

I want to support new events which are requirements assigned to me by the company. I would like to know if you know if there is any code in plunker which has used some of the events you have created let say like onItemChange(), onChangeAny() and so on... I would like to take a look how these events can be triggered by an angular application. For now I have used onDragStop, onResizableStart

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/BTMorton/angular2-grid/issues/224#issuecomment-293262389, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AF4yzSBCmZafelZ9Bhhy6u4R12_ApOQiks5ru3_FgaJpZM4M6Dp1.

[aitipi22]

Thank you for your email. I have been using Angular2 for about 6 months and I know that @Input and @Output has to do with parent child relationship. Input is from parent to child and Output other way around. Now I am trying to understand the code you have published in github repository for this library but I do not see how EventEmitters of NgGridItem are being called. I see that let say onResizeStartEvent() emit some of the output properties but I want to know where onResizeStartEvent itself is called in order to trigger the event to the parent? I would really appreciate if you can help me.

[OnlyAGhost]

If you look in here: https://github.com/BTMorton/angular2-grid/blob/master/src/directives/NgGrid.ts

At the top there are Outputs() @Output() public onResize: EventEmitter = new EventEmitter();

And those are called by emitting in the code: this.onResizeStart.emit(item);

So that is how you can add custom Outputs and emit events to upstream components.

Thanks! Brian

[aitipi22]

@OnlyAGhost Thank you for your time. What I wanted to know is that how _resizeStart is called and after a careful examination of your code I realized it is done by using (mousemove) and (touchmove) which call mouseMoveEventHandler. Now I have a good understanding of what is going on. Thank you again