0

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

Sreemat
  • 616
  • 10
  • 28
prakash r
  • 113
  • 1
  • 11

1 Answers1

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>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Reason why im trying to do using jquery is , i have shared element ref of an component to other component. trying to load the content of element ref from other component wch is placed. and content will be from shared component. or is there any other way to achieve tiz. – prakash r Jul 29 '17 at 11:30
  • You can use `shared-service` to share data to component and based on the same `listOfAllColumns` column value will populated and `*ngFor` will do its work on front-end – Pankaj Parkar Jul 29 '17 at 12:11