IgGrid in IngniteUI angular, virtualization + templating engine not working

Here is the Ts file where everything about the grid is declared, besides the custom css which I have to put in the global style.css file because if I try to add styling in the component's css what is declared in this component, nothing happens.

********************************************************************************************

import * as $ from "jquery";

import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';

import { Headers, Http } from '@angular/http';

import { DetentionManagerService } from '../services/DetentionManagerService';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { Subscription } from 'rxjs';

import { Terminal } from './../Models/Terminal';

@Component({

selector: 'app-detention-manager',

templateUrl: './detention-manager.component.html',

styleUrls: ['./detention-manager.component.scss']

})

export class DetentionManagerComponent implements OnInit, OnDestroy {

private grid: IgGrid;

itemResource = null;

items = [];

chosenTerminal: Terminal;

itemCount = 0;

terminals = [];

private id: string = "gridContainerManager";

private _detentionManagerTerminalsSubscription: Subscription;

private _detentionManagerItemsSubscription: Subscription;

constructor(private _detentionManagerService: DetentionManagerService) {

}

ngOnInit() {

this.getAllData();

}

ngOnDestroy() {

this._detentionManagerTerminalsSubscription.unsubscribe();

this._detentionManagerItemsSubscription.unsubscribe();

}

createGrid(): void {

this.grid = {

dataSource: this.items,

width: "100%",

autoCommit: true,

fixedHeaders: true,

height: "85vh",

autoGenerateColumns: false,

//this function is to customize the header tooltip values

headerCellRendered: function (evt, ui) {

let key = ui.columnKey,

th = ui.th;

// Will need the exact words wanted

switch (key) {

case "ContainerName":

$("#gridContainerManager_ContainerName").attr("title", "Container Name");

break;

case "TerminalName":

$("#gridContainerManager_TerminalName").attr("title", "Terminal Name");

break;

case "ShippingLine":

$("#gridContainerManager_ShippingLine").attr("title", "Shipping Line");

break;

case "ShippingUnitStatus":

$("#gridContainerManager_ShippingUnitStatus").attr("title", "Status");

break;

case "ReceptionTime":

$("#gridContainerManager_ReceptionTime").attr("title", "Reception Time");

break;

case "DaysInYard":

$("#gridContainerManager_DaysInYard").attr("title", "Days In Yard");

break;

case "NumberOfDaysLeft":

$("#gridContainerManager_NumberOfDaysLeft").attr("title", "Free time remaining");

break;

case "Closing":

$("#gridContainerManager_Closing").attr("title", "Closing Date");

break;

case "Booking":

$("#gridContainerManager_Booking").attr("title", "Booking");

break;

case "Forwarder":

$("#gridContainerManager_Forwarder").attr("title", "Forwarding Agent");

break;

case "CanAccountManager":

$("#gridContainerManager_CanAccountManager").attr("title", "Account Manager");

break;

}

primaryKey: "ContainerName",

columns: [

{

key: "TerminalName",

headerText: "Terminal Name",

width: "5%",

dataType: "string"

{

key: "ContainerName",

headerText: "Container",

width: "10%",

dataType: "string"

{

key: "ShippingLine",

headerText: "S/L",

width: "15%",

dataType: "string"

{

key: "DepotStatus",

dataType: "string",

hidden: true

{

key: "ShippingUnitStatus",

headerText: "Status",

width: "10%",

dataType: "string",

template: "{{if ${DepotStatus} == 'Available'}}<div>In depot</div>{{else}}<div>${ShippingUnitStatus}</div>{{/if}}"

{

key: "ReceptionTime",

headerText: "Date In",

width: "10%",

dataType: "date",

format: "dateLong"

{

key: "DaysInYard",

headerText: "Days in Yard",

width: "5%",

dataType: "number"

{

key: "NumberOfDaysLeft",

headerText: "Free Time Remaining",

width: "7%",

dataType: "number",

//To make my cell background colored on a condition

template: "{{if ${NumberOfDaysLeft} < 0 }}<div style='background-color: #ff6666; width:100%; height:100%; position:absolute; top:0; left:0; border: 2px solid white; text-align:center'><div style = 'position: relative; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%)'>${NumberOfDaysLeft}</div></div>{{else}}<div style='width:100%; height:100%; position:absolute; top:0; left:0; border: 2px solid white; text-align:center'><div style = 'position: relative; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%)'>${NumberOfDaysLeft}</div></div>{{/if}}"

{

key: "Closing",

headerText: "Closing Date",

width: "10%",

dataType: "date",

format: "dateLong"

{

key: "Booking",

headerText: "Booking",

width: "7%",

dataType: "string"

{

key: "Forwarder",

headerText: "Forwarding Agent",

width: "15%",

dataType: "string"

{

key: "UsaAccountManager",

dataType: "string",

hidden: true

{

key: "CanAccountManager",

headerText: "Account Mgr",

width: "12%",

dataType: "string",

template: "{{if ${Forwarder} == 'RAY-MONT LOGISTICS CANADA INC.'}}'<div>${CanAccountManager}</div>{{elseif ${Forwarder} == 'RAY-MONT LOGISTICS AMERICA INC.'}}<div>${UsaAccountManager}</div>{{/if}}"

}

features: [

{

editMode: "none",

enableAddRow: false,

enableDeleteRow: false,

{

type: "local",

persist: true

{

type: "local",

mode: "multi",

sortingDialogContainment: "window"

{

mode: 'cell',

multipleSelection: true,

persist: true

}

]

};

}

getAllData(): void {

this.items = [];

this.createGrid();

this._detentionManagerItemsSubscription = this._detentionManagerService.getAllDetentionManagerItems().subscribe(results => {

this.items = results;

this.createGrid();

});

}