diff --git a/modules/@angular/common/src/directives/ng_plural.ts b/modules/@angular/common/src/directives/ng_plural.ts index b3b85cdc2d..acd1865de9 100644 --- a/modules/@angular/common/src/directives/ng_plural.ts +++ b/modules/@angular/common/src/directives/ng_plural.ts @@ -103,6 +103,7 @@ export class NgPluralCase { constructor( @Attribute('ngPluralCase') public value: string, template: TemplateRef, viewContainer: ViewContainerRef, @Host() ngPlural: NgPlural) { - ngPlural.addCase(value, new SwitchView(viewContainer, template)); + const isANumber: boolean = !isNaN(Number(value)); + ngPlural.addCase(isANumber ? `=${value}` : value, new SwitchView(viewContainer, template)); } } diff --git a/modules/@angular/common/test/directives/ng_plural_spec.ts b/modules/@angular/common/test/directives/ng_plural_spec.ts index 3b0927b826..bd78843a07 100644 --- a/modules/@angular/common/test/directives/ng_plural_spec.ts +++ b/modules/@angular/common/test/directives/ng_plural_spec.ts @@ -12,7 +12,7 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/matchers'; export function main() { - describe('switch', () => { + describe('ngPlural', () => { let fixture: ComponentFixture; function getComponent(): TestComponent { return fixture.componentInstance; } @@ -47,6 +47,22 @@ export function main() { detectChangesAndExpectText('you have one message.'); })); + it('should display the template according to the exact numeric value', async(() => { + const template = '
' + + '
    ' + + '' + + '' + + '
'; + + fixture = createTestComponent(template); + + getComponent().switchValue = 0; + detectChangesAndExpectText('you have no messages.'); + + getComponent().switchValue = 1; + detectChangesAndExpectText('you have one message.'); + })); + // https://github.com/angular/angular/issues/9868 // https://github.com/angular/angular/issues/9882 it('should not throw when ngPluralCase contains expressions', async(() => {