CODEWITHSUNDEEP
angular
user2171796
user2171796

Reputation: 437

I'd like to set a breakpoint on ng-template

I have this line in my html. 

<ng-template ngFor let-i="index" let-c="count" let-contact [ngForOf]="contacts">

The ngFor seems to be executing when I don't expect it to. I'd like to "set a breakpoint" to see whether it is actually recreating the elements.

What comes to mind is to do something like this: 

<ng-template ngFor let-i="index" let-c="count" let-contact let-dummy="functionCalledOnEachIteration" [ngForOf]="contacts">

And then set a breakpoint in functionCalledOnEachIteration. But that syntax is not accepted.

Is there a way to do what I have in mind?

Upvotes: 0

Views: 910

Answers (1)

Mino
Mino

Reputation: 994

ngFor

Yes, there is such syntax:

<ng-template
    ngFor let-contact [ngForOf]="contacts"
    let-i="index" let-c="count" [ngForTrackBy]="functionCalledOnEachIteration"

>

in component:

public functionCalledOnEachIteration(index, item) {
  debugger;
  console.log('trackByFn', index, item);
  return item;
}

trackBy is normally used for loop optimalization (see: https://angular.io/api/common/NgForOf)

ng-template debugging

For ng-template debugging, I usually use also this trick:

Imagine you don't know which let-x='???' are valid for template. You can try: 

<ng-template let-context="valueOf()">{{log(context)}}</ng-template>

and

public log(x) { console.log('template log:', x); }

valueOf is part of object.prototype, and if it is not overridden, then it returns itself. When you have template-context object instance, you can see all its properties. These are the ones you can access via let-x='???' syntax.

Upvotes: 3

Related Questions