using the directive in *ngFor

[johnedvard]

I have an issue that code elements with the highlight-js-content=".highlight" only highlights the first element in a for-loop. Maybe I am doing something wrong though.

Here is some of the code I am working with:

<div *ngFor="let code in codes">
<pre><code [ngClass]="{'lua':true}" highlight-js-content=".highlight">{{code}}</code></pre>
</div>

[johnedvard]

I put the highlight-js-content on the outer most element, and now highlights work inside a loope of code elements

[hafquangbaox]

Hi, i use lastest version of angular-cli. And i can't find system.config.js. Please explain how i config it?

[johnedvard]

I experienced that highlight-js-content took up lots of resources when used, so I apply the highlight manually inside ngAfterViewInit like so:

constructor(private el: ElementRef, private service : HighlightJsService) {
}

ngAfterViewInit() {
        var luaElements:any = this.el.nativeElement.getElementsByClassName('lua');
        if(luaElements && luaElements.length>0){
            for(var i:number = 0; i<luaElements.length; i++){
                this.service.highlight(luaElements[i]);
            }
        }
    }

[hafquangbaox]

I did it, but if your web have so much code tag, web will slowly and lag. :(

[JayChase]

A way round this would be to put the directive on an element wrapping the ngFor like below.

<div highlight-js-content=".highlight">
    <div *ngFor="let code of codes" [innerHTML]="code">
    </div>
</div>

I had a test today and the content directive ngAfterViewChecked event on the will get called for every item in the ngFor. but it will only call highlightBlock after everything has been rendered when it will then call highlightblock for each so it doesn't take up much in the way of resource.

Can you see how often the event is firing in the code you are having a problem with? If something is constantly updating the element's content that would cause a problem but I haven't been able to recreate it yet.