UNPKG

angular2

Version:

Angular 2 - a web framework for modern web apps

74 lines (73 loc) 2.65 kB
import { ViewContainerRef, TemplateRef, QueryList, AfterContentInit } from 'angular2/core'; export declare abstract class NgLocalization { abstract getPluralCategory(value: any): string; } /** * `ngPlural` is an i18n directive that displays DOM sub-trees that match the switch expression * value, or failing that, DOM sub-trees that match the switch expression's pluralization category. * * To use this directive, you must provide an extension of `NgLocalization` that maps values to * category names. You then define a container element that sets the `[ngPlural]` attribute to a * switch expression. * - Inner elements defined with an `[ngPluralCase]` attribute will display based on their * expression. * - If `[ngPluralCase]` is set to a value starting with `=`, it will only display if the value * matches the switch expression exactly. * - Otherwise, the view will be treated as a "category match", and will only display if exact * value matches aren't found and the value maps to its category using the `getPluralCategory` * function provided. * * If no matching views are found for a switch expression, inner elements marked * `[ngPluralCase]="other"` will be displayed. * * ```typescript * class MyLocalization extends NgLocalization { * getPluralCategory(value: any) { * if(value < 5) { * return 'few'; * } * } * } * * @Component({ * selector: 'app', * providers: [provide(NgLocalization, {useClass: MyLocalization})] * }) * @View({ * template: ` * <p>Value = {{value}}</p> * <button (click)="inc()">Increment</button> * * <div [ngPlural]="value"> * <template ngPluralCase="=0">there is nothing</template> * <template ngPluralCase="=1">there is one</template> * <template ngPluralCase="few">there are a few</template> * <template ngPluralCase="other">there is some number</template> * </div> * `, * directives: [NgPlural, NgPluralCase] * }) * export class App { * value = 'init'; * * inc() { * this.value = this.value === 'init' ? 0 : this.value + 1; * } * } * * ``` */ export declare class NgPluralCase { value: string; constructor(value: string, template: TemplateRef, viewContainer: ViewContainerRef); } export declare class NgPlural implements AfterContentInit { private _localization; private _switchValue; private _activeView; private _caseViews; cases: QueryList<NgPluralCase>; constructor(_localization: NgLocalization); ngPlural: number; ngAfterContentInit(): void; }