Component Panel: Adding control flow inside ng-template for header is not working anymore

[kribot]

Describe the bug

When adding control flow operator like @if in ng-template in Panel it breaks the template and the content is not rendered.

Environment

18.0.3

Reproducer

https://stackblitz.com/edit/github-akrybn?file=src%2Fapp%2Fapp.component.html

Angular version

18.0.3

PrimeNG version

18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.6.2

Browser(s)

No response

Steps to reproduce the behavior

Create a panel with a template
<p-panel [toggleable]="true">

Prime
@if (1 === 1) {
NG
}

Expected behavior

Result should display Prime NG, instead it removes everything

[0x426]

Having the same error with some other components, check this out:

• Inconsistent and (currently) incorrectly documented use of template variables in components. #16976

[can-oezkan]

As a workaround, using <ng-template #header /> instead of <ng-template pTemplate="header" /> seems to work.

Regarding the cause of this bug, I suspect that when using @ContentChild('header') headerTemplate, Angular reassigns the value if it encounters a control flow block like @defer, @if, @for, or @switch within the headerTemplate.

Due to this reassignment by Angular, we lose the reference to the pTemplate, which is initialized in basecomponent.ts by manually setting the headerTemplate variable:

primeng/packages/primeng/src/basecomponent/basecomponent.ts

Lines 75 to 90 in 8fd83e4

	ngAfterContentInit() {
	this.templates?.forEach((item) => {
	const type = item.getType();
	const template = `${type}Template`;
	if (this.hasOwnProperty(template)) {
	this[template] = item.template;
	}
	if (this.hasOwnProperty(`_${template}`)) {
	this[`_${template}`] = item.template;
	}
	this[type] = item.template;
	});
	}

This means the scope of this bug could extend to other components that use the @ContentChild decorator.

[vanackej-onemw]

Hi.
Just to add a precision : the workround (using # syntax) works partially, but fails with nested components (like panel in panel), as the outer panel uses the customized header of the first nested panel if the outer panel as no header template defined.

[mehmetcetin01140]

Fixed in 4f766b2