Hello Team,
How can I dynamically add html to an angular component.
After adding the dynamic html, my click event does not work. Please note that I am not using ngFor, I use datatable add row.
console.log('About to fetch all the clients in our system ...');
let clientsUrl = 'http://www.mocky.io/v2/5ae1edaf2d000056009d7f7b';
this.apiService.getRequest(clientsUrl).subscribe((responseData) => {
if (responseData.status !== 200) {
// alert the user of the issue
console.error('Unable to fetch all clients details: \n' + JSON.stringify(responseData.json()));
bootstrapJqueryFunctions.appToast('Clients Error', 'Something went wrong while trying to fetch clients details, please try again.', '#ff0000', 'error');
} else {
let table = $('#myTable').DataTable({
"retrieve": true
});
try {
let clients = responseData.json();
for (let client of clients) {
if (null != client && typeof client == 'object') {
var btn = '<div class="btn-group">' +
'<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">' +
'Action' +
'</button>' +
'<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 35px, 0px); top: 0px; left: 0px; will-change: transform;">'+
'<a class="dropdown-item" (click)="editClient(' + client.id + ')" href="javascript:void(0)">Edit Client</a>' +
'<a class="dropdown-item" (click)="viewClientDetails(' + client.id + ')" href="javascript:void(0)">View Full Details</a>' +
'<div class="dropdown-divider"></div>' +
'<a class="dropdown-item" (click)="deleteClientDetails(' + client.id + ')" href="javascript:void(0)">Delete Client</a>' +
'</div>' +
'</div>';
table.row.add([client.name, client.code, client.email, client.notificationType, btn]).draw();
}
}
// this.clients = clients.map((client) => new Client(client));
// bootstrapJqueryFunctions.bootstrapDatable();
} catch(e) {
console.log('Unable to parse clients details as JSON array');
// bootstrapJqueryFunctions.appToast('Clients Error', responseData.requestData, '#ff0000', 'error');
}
}
});