Angular2 : Can't bind to 'ngPluralCase' since it isn't a known property of 'x'

Question

First, this question is not a duplicate, most answers to questions like "Cannot bind to 'x'..." are about unimported modules, I've already imported the right one(s).

I'm following angular.io's doc about ngPlural and ngPluralCase directives:

<some-element [ngPlural]="value">
  <ng-container *ngPluralCase="'=0'">...</ng-container>
  <ng-container *ngPluralCase="'other'">...</ng-container>
</some-element>

(...)

exported from @angular/common/index, defined in @angular/common/src/directives/ng_plural.ts

When I try to run this code I get an error (see it in plnkr):

Can't bind to 'ngPluralCase' since it isn't a known property of 'ng-container'.

main.ts :

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { Component, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  template:`
  <div [ngPlural]="1">
      <ng-container *ngPluralCase="'=0'">...</ng-container>
      <ng-container *ngPluralCase="'other'">...</ng-container>
  </div>
  `,
  styles: []
})
class AppComponent {

}

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [AppComponent],
  exports: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

I imported BrowserModule (which exports CommonModule, but I also tried importing CommonModule directly) in my AppModule, and as you can see, the error is about ngPluralCase and not ngPlural which is in the same module and used without problem...

So my question is :

Does anyone knows what is happening here ? Is it a bug related to the "experimental" state of these directives or am I missing something ?

PS: I'm using angular v2.1.0

Answer 1

For the moment I Opened an issue on the Github repo, because it really seems broken....

Edit This is the answer that I got from my Github issue:

The problem here is actually that the NgPluralCase directive uses an @Attribute injection and because ng-container are virtual nodes, attributes can not be retrieved on them.

You have to use a <template> tag in this case, the docs will be fixed as part of a pending PR.