Search code examples
javascriptangularangular-structural-directive

Using ngIf Structural Directive Freezes App

I have an angular 15 project in which If I run the following structural *If directive on an ng-component; the app freezes.

Attempting to recreate the issue in an simplified example using stackblitz, it works and does not freeze

Any ideas what the problem would be based on just the below examples. Even when my template contains only an ng-component I encounter the issue

<ng-component *ngIf="true"><h1>hello</h1></ng-component>

when I add a method just to debug I can see it is printing the console.log infinitely

<ng-component *ngIf="test()"><h1>hello</h1></ng-component> 

test() {
 console.log("world")
}

however when I place the structural directive on a non ng-component, it works fine

<h1 *ngIf="true"><hello</h1>
Solution

  • ng-component is not a standard Angular directive or element. so structural directives do not work on it.

    Needed to use an element that is recognised by Angular