Angular 4 - Compile [ngClass] inside jquery append

Question

I am new to Angular 4 , Trying to dynamically append li contents using $().append() methods. Im not able to compile and use [ngClass] directive.

jQuery is considering it as string and appending to DOM. I would like to compile it dynamically execute the as an angular 4 directive.

Array containing dummy datas is below.!

    let listOfAllColumns = [
        { name: "name", active: false },
        { name: "ConnectionType", active: true },
        { name: "Type", active: false },
    ];

Looping though array using jQuery

      listOfAllColumns.forEach(item => {
        $(this.sortElement).append("<li><a href= 'javascript:;' [ngClass]='{'activeTick': "+ item.active +"}'>"+ item.name +"</a></li>");
    });

My DOM content :

<a href="javascript:;" [ngClass]="{" activetick':="" false}'="">name</a>

[ngClass] is considered as an string is there a way to compile this statement in angular ..!!!

Thanks in advance

Answer 1

First place why would you want render template with jQuery. You can easily do it in Angular way by looping over collection listOfAllColumns and render similar templates collection.length times

Class

listOfAllColumns = [
    { name: "name", active: false },
    { name: "ConnectionType", active: true },
    { name: "Type", active: false },
];

Html

<ul>
    <li *ngFor="let item in listOfAllColumns" 
       [ngClass]="{'activeTick': item.active }">
        {{item.name}}
    </li>
<ul>