<ng-template> with [ngIf] does not render SVG content #41308
Description
🐞 bug report
Affected Package
Probably @angular/core ?
Is this a regression?
Don't know
Description
When using an <ng-template> in the non-asterisk longhand form to render SVG fragments, neither the main template nor the else template are rendered:
// component
test=true;
// template
<svg width="200" height="80">
<text x="0" y="20">SVG Test</text>
<ng-template [ngIf]="test" [ngIfElse]="svgElse">
<text x="0" y="40">SVG Test True</text>
</ng-template>
<ng-template #svgElse>
<text x="0" y="40">SVG Test False</text>
</ng-template>
</svg>
// rendered output
<svg _ngcontent-gar-c204="" width="200" height="80">
<text _ngcontent-gar-c204="" x="0" y="20">SVG Test</text>
<!--container-->
<!--container-->
</svg>Note that using <ng-container> with the structural *ngIf form does work:
<svg width="200" height="80">
<text x="0" y="20">SVG Test</text>
<ng-container *ngIf="test else svg2Else">
<text x="0" y="40">SVG Test True</text>
</ng-container>
<ng-template #svg2Else>
<text x="0" y="40">SVG Test False</text>
</ng-template>
</svg>Given other issues I've had with svg, I've tried both with and without svg: namespace prefixes on the child svg elements. Seems to exhibit the same behaviour in both cases.
🔬 Minimal Reproduction
🌍 Your Environment
Angular Version:
Angular CLI: 11.2.2
Node: 14.15.5
OS: linux x64
Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.7
@angular-devkit/build-angular 0.1102.2
@angular-devkit/core 11.2.2
@angular-devkit/schematics 11.2.2
@angular/cdk 11.2.2
@angular/cli 11.2.2
@schematics/angular 11.2.2
@schematics/update 0.1102.2
rxjs 6.6.6
typescript 4.1.5
Anything else relevant?