Angular 2: adding *ngIf to SVG throws an error

问题:

This is my SVG of a component (which will be a child another svg):

<svg *ngIf="complete" [attr.width]="width" [attr.height]="height" viewBox="0 0 180 100" version="1.1" xml:space="preserve" style="overflow:visible;stroke-linejoin:round;stroke-miterlimit:1.41421;"> ...</svg>

I'm getting an error when adding *ngIf to a component template with SVG:

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngIf' since it isn't a known property of ':svg:svg'.

*ngIf works fine on other parts of the code except for svg

Height and Width attributes binding works fine.

I have checked ngIf spelling and model property. I tested adding BrowserModule, didn't make any difference. I have CommonModule in @NgModule imports.

The component that have the SVG is generated by componentFactory.

I have Angular 2 Universal (latest version)

回答1:

Setting up dynamic bindings using Angular and SVG requires that you add the attr prefix before the attribute.

Because *ngIf is syntatic sugar for [ngIf], I've gotten around the error message by writing out the ngIf and the ng-template:

<ng-template [ngIf]="!label.hasCompensation">
        <svg:text text-anchor="middle" [attr.x]="label.x" [attr.y]="label.y">
                {{label.encoder}} |
                <tspan style="fill:red">{{label.compensation}}</tspan>
        </svg:text>
</ng-template>

The primary reason for this is that the SVG DOM generally does not expose attributes as properties like the HTML DOM does.

For reference, Tero Parviainen has written an excellent post on his blog.

回答2:

As Günter wrote make sure you have the CommonModule available to the module that contains the svg

Here is a working plunkr https://plnkr.co/edit/XgU2Ns?p=preview

<svg width="100%" height="100%">
  <rect
    x="20"
    y="20"
    width="100"
    height="100"
  />

  <rect
    *ngIf="showRed"
    x="140"
    y="20"
    width="100"
    height="100"
    style="fill: red;"
  />
</svg>

<button type="button" (click)="showRed = !showRed">Show Red</button>

回答3:

You can use [ngClass] instead of *ngIf

in your HTML:

<app-trend-chart [data]="trendData"
 [ngClass]="loading.charts.isLoading? 'chartVisible': 'chartNotVisible'">
</app-trend-chart>

in your CSS:

.chartNotVisible {
    display: none;
}

.chartVisible {
    display: block;
}