Initially, let me clarify that this question is unique and not a repetition of others. Most solutions to issues like "'x' cannot be bound..." usually involve unimported modules. However, in my case, I have already imported the necessary one(s).
I am currently following the documentation on ngPlural and ngPluralCase directives from angular.io:
<some-element [ngPlural]="value"> <ng-container *ngPluralCase="'=0'">...</ng-container> <ng-container *ngPluralCase="'other'">...</ng-container> </some-element>(...)
These are exported from @angular/common/index and defined in @angular/common/src/directives/ng_plural.ts.
Upon attempting to execute this code, an error arises (accessible here in plnkr):
Error: Can't bind to 'ngPluralCase' since it isn't a recognized 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);
In my AppModule, I have imported BrowserModule (which also includes CommonModule), although I have attempted importing CommonModule directly as well. Despite this, the error pertains to ngPluralCase rather than ngPlural, which is within the same module and functioning correctly...
Hence, my inquiry is:
Has anyone encountered a similar issue? Could this be a glitch associated with the "experimental" nature of these directives, or have I overlooked something crucial?
PS: My current angular version is v2.1.0.