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>