@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 UIsorry, I intend to raise ticket for angular. ths