NativeScript/nativescript-angular

@if Syntax Not Rendering Content in Angular 18

EmbiiFox opened this issue · 1 comments

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
"@angular-devkit/build-angular": "^18.2.4",
"@angular/cli": "^18.2.4",
"@angular/compiler-cli": "^18.2.4",
"@angular/animations": "^18.2.12",
"@angular/cdk": "^18.2.13",
"@angular/common": "^18.2.12",
"@angular/compiler": "^18.2.12",
"@angular/core": "^18.2.12",
"@angular/forms": "^18.2.12",
"@angular/platform-browser": "^18.2.12",
"@angular/platform-browser-dynamic": "^18.2.4",
"@angular/router": "^18.2.4",

Describe the bug
The @if syntax introduced in Angular 18 is not rendering the content as expected. Although the conditions are valid, the HTML elements within the @if block do not render in the UI. However, when I remove the @if block, the UI elements appear as expected. Could you please give me advice to fix this issue? Thanks.

To Reproduce
Create an Angular 18 component with the following template:

@if (cvDetail && cvDetail.id) {
  <div class="right-content">
    <div>
      <div id="toc-target">
        <div #htmlToc class="toc-content"></div>
      </div>
      <div id="toc-target-no-water-mark" #htmlTocNoWaterMark>
      </div>
    </div>
  </div>
}
export class ExampleComponent implements OnInit, OnChanges {
  @Input() cvDetail: any; 

  @ViewChild('htmlToc') htmlToc: ElementRef | undefined;
  @ViewChild('htmlTocNoWaterMark') htmlTocNoWaterMark: ElementRef | undefined;
  constructor() { }
  ngOnInit(): void {
  }
  ngOnChanges() {
    if (this.cvDetail) {
        if (this.htmlTocNoWaterMark) {
          if (this.htmlToc) {
            this.htmlToc.nativeElement.innerHTML = '';
          }
          this.htmlTocNoWaterMark.nativeElement.innerHTML = this.cvDetail.body ? this.cvDetail.body : '';
        }
    }
  }
}

Expected behavior
value of this.cvDetail.body, example is '

sample (Red font, bold, underlined)

' will be rendered in the UI

sorry, I intend to raise ticket for angular. ths