Angular: How to render HTML from a .ts file?
Solution 1
If you really want to use dataTable, maybe this can be helpful for you:
https://stackoverflow.com/a/38983367/2624360
Basically you should create an Directive that encapsulate your dataTable logic.
import {Directive, ElementRef} from '@angular/core';
import {Input, OnInit} from '@angular/core';
import { JqueryDataTableEvent } from './jquery-datable-event';
import 'jquery.dataTables';
declare var jQuery:any;
@Directive({
selector: '[jqueryDatatable]'
})
export class JqueryDatatableDirective implements OnInit {
private _datatable : any;
@Input()
jqueryDatatable: any;
@Input()
dataTableEvents: JqueryDataTableEvent[];
constructor(private _element: ElementRef) {}
ngOnInit() {
this.applyOptions();
this.applyEvents();
}
applyOptions()
{
if (!this.jqueryDatatable)
console.error("Empty options array was passed to initialize jqueryDatatable.");
this._datatable = jQuery(this._element.nativeElement).DataTable( this.jqueryDatatable || {} );
}
applyEvents() {
this.dataTableEvents.map((event)=> {
this._datatable.on(event.eventName, event.selector, event.callback)
});
}
}
Someone (@DarioN1) create and example with this:
https://plnkr.co/edit/t0Zwc3AtQTt98XvIirZ9?p=preview
Solution 2
[routerLink] doesn't work. You need to use innerHTML functionality.
ts file:-
tool = '<a href="../../user/update" class="fa fa-1x fa-pencil-square-o">View</a>';
html file:-
<div [innerHTML]="tool"></div>
Output:-
<div _ngcontent-c1=""><a href="../../user/update" class="fa fa-1x fa-pencil-square-o">View</a></div>
Mak
Updated on June 28, 2022Comments
-
Mak almost 2 years
I used jQuery dataTable for display data on list view. And I tried to bind data to dataTable using following way.
On users.component.ts
getUsers() { this.UserService.getUsersList() .subscribe( success => { this.userList = success; $("#userTable").find('tbody').empty(); var dataClaims = this.userList; for (let i = 0; i < dataClaims.length; i++) { $('#userTable').dataTable().fnAddData([ (i + 1), dataClaims[i].name, dataClaims[i].email, dataClaims[i].contact_number, dataClaims[i].address, '<a [routerLink]="[' +"'"+"../../user/update" +"'" +']"' + ' class="fa fa-1x fa-pencil-square-o"></a>', ]); } } ); }
Above function is working properly and dataTable is working without issue.
But
[routerLink]
is not converted to html. On the output it is displayed following way,<a [routerlink]="['../../user/update']" class="fa fa-1x fa-pencil-square-o"></a>
But it should be converted to following way,
<a _ngcontent-c0="" ng-reflect-router-link="user/update" href="/user/update" class="fa fa-1x fa-pencil-square-o"></a>
Could someone please explain how to convert
[routerlink]
to normal link when render html data from a .ts file. Thank you. -
Mak over 6 yearsCould you please explain that using my code sample.
-
Edric over 6 yearsEven if you use
DomSanitizer
, it still does not compile it through Angular. -
Edric over 6 yearsThe OP wanted
routerLink
and notinnerHTML
. -
C4d almost 5 yearsSeems not to work. Testet it with a small example. The
innerHTML
prop isnt doing anything.