Angular 6 - Kendo UI Grid cell template

Question

I'm trying to place a <canvas> element within a kendoGridCellTemplate in Angular 6. However, I'm getting an error: "Cannot read property 'nativeElement' of undefined" .

If I test it by placing the <canvas> above the grid, I can see it works. However, inside the <ng-template> it doesn't.

I guess the main question is: can this be done ? If so, what am I doing wrong.

 export class CustomerListComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit{ ... @ViewChild("customerInitials") customerInitials; ... constructor() { } ... drawInitials () { let colours = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"]; let name = "Bob Mazzo"; let nameSplit = name.split(" "); let initials = nameSplit[0].charAt(0).toUpperCase() + nameSplit[1].charAt(0).toUpperCase(); let charIndex = initials.charCodeAt(0) - 65; let colourIndex = charIndex % 19; // GET CANVAS HERE ! this.canvas = this.customerInitials.nativeElement; this.context = this.canvas.getContext("2d"); let canvasWidth = this.canvas.width; let canvasHeight = this.canvas.height; let canvasCssWidth = canvasWidth; let canvasCssHeight = canvasHeight; if (window.devicePixelRatio) { this.canvas.width = canvasWidth * window.devicePixelRatio; this.canvas.height = canvasHeight * window.devicePixelRatio; this.canvas.style.width = canvasCssWidth; this.canvas.style.height = canvasCssHeight; this.context.scale(window.devicePixelRatio, window.devicePixelRatio); } this.context.fillStyle = colours[colourIndex]; this.context.fillRect (0, 0, this.canvas.width, this.canvas.height); this.context.font = "16px Arial"; this.context.textAlign = "center"; this.context.fillStyle = "#FFF"; this.context.fillText(initials, canvasCssWidth / 2, canvasCssHeight / 1.5); } } 

 <kendo-grid-column> <ng-template kendoHeaderTemplate let-column></ng-template> <ng-template kendoGridCellTemplate let-dataItem> {{ drawInitials() }} <canvas #customerInitials id="user-icon" width="35" height="35" ></canvas> </ng-template> </kendo-grid-column> 

Answer 1

My solution forgoes the canvas element, and just uses a circle class and a span instead:

 getCustomerInitials(dataItem) { let first = dataItem.FirstName !== undefined ? dataItem.FirstName[0].toUpperCase() : ''; let last = dataItem.LastName !== undefined ? dataItem.LastName[0].toUpperCase() : ''; return first + last; } 

 <kendo-grid-column> <ng-template kendoHeaderTemplate let-column></ng-template> <ng-template kendoGridCellTemplate let-dataItem> <a> <i class="circle" style="background: antiquewhite; display: inline-flex; height: 30px; width: 30px; border-radius: 50%; border: white; border-style: solid; border-width: 1px;"> <span style="margin: 6px 0 0 5px; color: #000;font: 14px Arial;"> {{ getCustomerInitials(dataItem) }} </span> </i> </a> </ng-template> </kendo-grid-column>