Hey Deyan,

This issue is a big pain point for us.  It feels like we are losing the power of these components when we use angular 2 instead of angular 1.X.  Sample code would be a big help. Anything you can do to expedite this is appreciated.

Hello guys,

I managed to prepare a solution with Angular2 templating. It required a lot of modifications. And the reason for this is the huge conceptual difference between both IgniteUI templating and Angular2 templating.

It would of been easier if everything in IgGrid was a component. If every row and cell was a separate component, but that would of had massive performance impact.

But, let's get to the point:

Here's what I've done to achieve usage of a component inside of a cell in the IgGrid:

1. I extended the directive Column. It's MyColumn in the sample and it is used to override the IgniteUI template and use the ComponentFactoryResolver to create the Component we want.

2. Once we got the templating overridden we are able to build dynamically a component per record and store all those components. I'm also using the primaryKey to be sure which component for which row is.

3. Once the data is rendered, we want to go through the each templated cell and fill it with the desired Angular Component.

I tried explaining this as brief as possible, so if you have questions on that or need additional assistance, please let me know.

Hi Deyan,

Thanks for the quick response and the sample code. Is it possible to pass in the entire row's data (or just one attribute) into the click event handler? For example, in the documentation

(http://www.igniteui.com/grid/column-template), the product ID is passed to the deleteRow():

 { headerText: "", key: "Delete", dataType: "string", width: "20%", unbound: true, template: "<input type='button' onclick='deleteRow(${ProductID})' value='Delete row' class='delete-button'/>" }

I tried passing the ProductID to myClick() in the custom.component. It doesn't know what a ProductID is. For our application, it would be better if we can pass the entire row's data into the handler instead of passing only one attribute. 

<div>
<button type="button" (click)="myClick(${ProductID})">Click Me</button> <span>{{clickedStatus}}</span>
</div>

Thank you for your help.

-Jessica

I am using infragistics trial version and trying angular grid samples, There is no proper documentation for iggrid for angular2/4. I am also facing the same issue while creating the column template. The click event is not hit for the buttons inside the template column controls

{
headerText: "Action",
key: "Delete",
dataType: "string",
width: "20%",
unbound: true,
template: "<button type='button' (click)='myClick()'>Click Me</button> <span>{{clickedStatus}}</span> <span>ProductID</span>"
}

Please can you provide me an example so that we can solve this easily.

Thanks in advance.

Hi,

I was just wondering if this has been tackled inside the Ignite UI code by now or this cumbersome workaround is stil necessary?

Thanks!

Hey Jessica,

${ProductID} is part of the Infragistics template, we've overridden that one and this syntax does not mean nothing to angular.

So in order to use the record data you'll have to store this data(which is passed from the templating -  public recordData: any; in CustomComponent) in each instance:

cmpRef.instance["recordData"] = data;

And then use that in the template as you like:

<span>ProductID: {{recordData.ProductID}}</span>

I'm also attaching the modified sample.