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

I see you've opened an issue, good call. For some reason I've failed to use it like that but had success in using it like ` — Estus Flask, Oct 18 '16 at 12:21

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Rakhat · Answer 2 · 2017-01-19T05:26:00.397

0

Answer is angular.io right now is outdated, at least example of NgPlural.
Example below works with v2.4.4:

<some-element [ngPlural]="value">
  <template ngPluralCase="=0">there is nothing</template>
  <template ngPluralCase="=1">there is one</template>
  <template ngPluralCase="few">there are a few</template>
</some-element>

edited Jan 19 '17 at 05:26

answered Jan 19 '17 at 05:14

Rakhat

4,783
4
40
50

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

2 Answers2