Angular 2 integration with Vaadin Grid - Templates


We have a usecase for integrating a grid with Angular 2 based application. Following are the two prime use cases:

a) Cell templates
b) Detail Row

Based on the examples provided, we need to use the DataRenderer for a) above. Being an Angular based application, can we use Angular 2 templates/components and binding for rendering the cells?

For b) above, the example provides a Polymer template with dom binding. Is there anyway to use an angular template for this or even a Polymer template that can bind to angular data binding. Any examples for the above would be very helpful.

Also how do we set to the innerHTML of the data renderer and the Detail Row with the template?

Hi Javed!

Elements inside column renderer will not work with Angular 2 binding. So the following example won’t work:

var progressRenderer = function(cell:any) {
cell.element.innerHTML = ‘’;

  cell.element.innerHTML = '<progress [value]

=“cellValue” max=“100”>';
.renderer = progressRenderer;
[/code]But changing that to something like this will work:

var progressRenderer = function(cell) {
cell.element.innerHTML = ‘’;

  var progressElement = document.createElement('progress');
  progressElement.setAttribute('value', this.progressData);

[/code]And b has the same issue that you can’t use native Angular 2 binding inside the HTML. But the previously mentioned method will also work with detail rows.

  • Sami

Hi Sami,

Does that mean that we have to construct the entire html template using javascript and then set it inside the element? Also the element () mentioned above, should it be a ploymer element only?


Hi Javed,

You don’t have to construct the entire html template, you can also just write the innerHTML for it. So this will also work:

var progressRenderer = function(cell:any) { cell.element.innerHTML = ''; cell.element.innerHTML = '<progress value="' + this.cellValue + '" max="100"></progress>'; }; grid.columns[2] .renderer = progressRenderer; Inside the renderer you can use any HTML/Polymer/Angular… element. But the downside is that it doesn’t work with the Angular databinding (‘<progress [value]
=“cellValue” max=“100”>’).