n00dl3 n00dl3 - 20 days ago 12
TypeScript Question

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

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

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

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