SmartAdmin DataTables - how to import ajax data from component.ts - ajax

Question

I am using the SmartAdmin Angular 5 template to render a DataTable. The SmartAdmin datatable example, which I have modified to be LoginHistory, gets its ajax data from a JSON file stored in the web app, as I show below. This works fine. But, how can I modify it to get its data from a string defined in component.ts?
loginhistory.component.html
<div id="content">
<div class="row">
<sa-big-breadcrumbs [items]="['Table', 'Data Tables']" icon="table"
class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
</div>
<sa-widgets-grid>
<div class="row">
<article class="col-sm-12">
<div sa-widget [editbutton]="false" color="blueDark">
<header>
<span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>Export to PDF / Excel</h2>
</header>
<div>
<div class="widget-body no-padding">
<sa-datatable
[options]="{
ajax: '../../assets/api/tables/datatables.standard.json', // <<<<<<< HOW TO USE loginHistoryData FROM loginhistory.component.ts????
columns: [
{data: 'id'},
{data: 'name'},
{data: 'phone'},
{data: 'company'},
{data: 'zip'},
{data: 'city'},
{data: 'date'}
],
buttons: [
'copy', 'excel', 'pdf', 'print'
]
}"
tableClass="table table-striped table-bordered table-hover"
>
<thead>
<tr>
<th data-hide="mobile-p">ID</th>
<th data-class="expand">Name</th>
<th>Phone</th>
<th data-hide="mobile-p">Company</th>
<th data-hide="mobile-p,tablet-p">Zip</th>
<th data-hide="mobile-p,tablet-p">City</th>
<th data-hide="mobile-p,tablet-p">Date</th>
</tr>
</thead>
</sa-datatable>
</div>
</div>
</div>
</article>
</div>
</sa-widgets-grid>
</div>
loginhistory.component.ts
import { Component, OnInit } from '#angular/core';
import { FadeInTop } from "../../shared/animations/fade-in-top.decorator";
#FadeInTop()
#Component({
selector: 'sa-datatables-case',
templateUrl: './loginhistory.component.html',
})
export class LoginHistoryComponent implements OnInit {
public loginHistoryData: any;
constructor() {}
ngOnInit() {
this.loginHistoryData =
+ '{'
+ ' "data": ['
+ ' {'
+ ' "id": "1",'
+ ' "name": "Jennifer",'
+ ' "phone": "1-342-463-8341",'
+ ' "company": "Et Rutrum Non Associates",'
+ ' "zip": "35728",'
+ ' "city": "Fogo",'
+ ' "date": "03/04/14"'
+ ' },'
+ ' {'
+ ' "id": "2",'
+ ' "name": "Clark",'
+ ' "phone": "1-516-859-1120",'
+ ' "company": "Nam Ac Inc.",'
+ ' "zip": "7162",'
+ ' "city": "Machelen",'
+ ' "date": "03/23/13"'
+ ' },'
+ ' ]'
+ '}';
}
}

Answer 1

A little trial & error solved the problem. Just needed to change the ajax label to data, and include the name of the component.ts parameter.
I also cleaned up the loginHistoryData parameter by using the typescript nomenclature instead of a string.
loginhistory.component.html
<div id="content">
<div class="row">
<sa-big-breadcrumbs [items]="['Table', 'Data Tables']" icon="table"
class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
</div>
<sa-widgets-grid>
<div class="row">
<article class="col-sm-12">
<div sa-widget [editbutton]="false" color="blueDark">
<header>
<span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>Export to PDF / Excel</h2>
</header>
<div>
<div class="widget-body no-padding">
<sa-datatable
[options]="{
data: loginHistoryData, //<<<< change ajax to data and add the name of the component.ts parameter
columns: [
{data: 'id'},
{data: 'name'},
{data: 'phone'},
{data: 'company'},
{data: 'zip'},
{data: 'city'},
{data: 'date'}
],
buttons: [
'copy', 'excel', 'pdf', 'print'
]
}"
tableClass="table table-striped table-bordered table-hover"
>
<thead>
<tr>
<th data-hide="mobile-p">ID</th>
<th data-class="expand">Name</th>
<th>Phone</th>
<th data-hide="mobile-p">Company</th>
<th data-hide="mobile-p,tablet-p">Zip</th>
<th data-hide="mobile-p,tablet-p">City</th>
<th data-hide="mobile-p,tablet-p">Date</th>
</tr>
</thead>
</sa-datatable>
</div>
</div>
</div>
</article>
</div>
</sa-widgets-grid>
</div>
loginhistory.component.ts
import { Component, OnInit } from '#angular/core';
import { FadeInTop } from "../../shared/animations/fade-in-top.decorator";
#FadeInTop()
#Component({
selector: 'sa-datatables-case',
templateUrl: './loginhistory.component.html',
})
export class LoginHistoryComponent implements OnInit {
public loginHistoryData: any;
constructor() {}
ngOnInit() {
this.loginHistoryData = [
{
"id": "1",
"name": "Jennifer",
"phone": "1-342-463-8341",
"company": "Et Rutrum Non Associates",
"zip": "35728",
"city": "Fogo",
"date": "03/04/14"
},
{
"id": "2",
"name": "Clark",
"phone": "1-516-859-1120",
"company": "Nam Ac Inc.",
"zip": "7162",
"city": "Machelen",
"date": "03/23/13"
}
];
}
}