Angular: How to render HTML from a .ts file?

Question

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.

first , i don't think this is the best way to use HTML injection in DOM. Still if you want to use then you can try to sanitize it , then it will work — Ashitosh birajdar
– Ashitosh birajdar, Commented Dec 20, 2017 at 6:07
Instead of using JQuery's dataTable. You might want to check PrimeNG. primefaces.org/primeng/#/datatable . It's much cleaner and there's no DOM injection — Dino
– Dino, Commented Dec 20, 2017 at 6:52
@Ashitoshbirajdar Even when you try to sanitize it, the code will not get run through Angular's compiler. — Edric
– Edric, Commented Dec 29, 2017 at 15:12
(PS. It's also a bad idea to mix Angular and jQuery together.) — Edric
– Edric, Commented Dec 29, 2017 at 15:12

jcmordan · Accepted Answer · 2017-12-22 15:45:39Z

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

Raju · Accepted Answer · 2017-12-29 10:01:56Z

1

[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>

answered Dec 29, 2017 at 10:01

Raju

1602 silver badges10 bronze badges

2 Comments

Edric Over a year ago

The OP wanted routerLink and not innerHTML.

C4d Over a year ago

Seems not to work. Testet it with a small example. The innerHTML prop isnt doing anything.

Francesco Colamonici · Accepted Answer · 2017-12-29 14:12:28Z

0

You have to tell Angular that your HTML is safe:

import DomSanitizer;
inject DomSanitizer in your Component constructor;
wrap your link in bypassSecurityTrustHtml.

 import { DomSanitizer } from '@angular/platform-browser';
 
 export class UserComponent {
   constructor(private sanitizer: DomSanitizer) {}

   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,
                  this.sanitizer.bypassSecurityTrustHtml('<a [routerLink]="[' +"'"+"../../user/update" +"'" +']"' + ' class="fa fa-1x fa-pencil-square-o"></a>'),
              ]);
          }
      }
      );
   } 
 }

edited Dec 29, 2017 at 14:12

answered Dec 27, 2017 at 16:07

Francesco Colamonici

1,3071 gold badge12 silver badges17 bronze badges

2 Comments

Gayan Over a year ago

Could you please explain that using my code sample.

Edric Over a year ago

Even if you use DomSanitizer, it still does not compile it through Angular.

Collectives™ on Stack Overflow

Angular: How to render HTML from a .ts file?

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related