Permalink
Browse files

feat(common): better error message when non-template element used in …

…NgIf (#22274)

closes #16410

PR Close #22274
  • Loading branch information...
trotyl authored and vicb committed Feb 17, 2018
1 parent 49082d7 commit 67cf11d0710b898adabe0b126842ff99a8eee24f
Showing with 32 additions and 1 deletion.
  1. +10 −1 packages/common/src/directives/ng_if.ts
  2. +22 −0 packages/common/test/directives/ng_if_spec.ts
@@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstringify as stringify} from '@angular/core';


/**
@@ -118,13 +118,15 @@ export class NgIf {

@Input()
set ngIfThen(templateRef: TemplateRef<NgIfContext>) {
assertTemplate('ngIfThen', templateRef);
this._thenTemplateRef = templateRef;
this._thenViewRef = null; // clear previous view if any.
this._updateView();
}

@Input()
set ngIfElse(templateRef: TemplateRef<NgIfContext>) {
assertTemplate('ngIfElse', templateRef);
this._elseTemplateRef = templateRef;
this._elseViewRef = null; // clear previous view if any.
this._updateView();
@@ -163,3 +165,10 @@ export class NgIfContext {
public $implicit: any = null;
public ngIf: any = null;
}

function assertTemplate(property: string, templateRef: TemplateRef<any>): void {
const isTemplateRef = templateRef.createEmbeddedView != null;
if (!isTemplateRef) {
throw new Error(`${property} must be a TemplateRef, but received '${stringify(templateRef)}'.`);
}
}
@@ -217,6 +217,28 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
expect(fixture.nativeElement).toHaveText('false');
}));
});

describe('Type guarding', () => {
it('should throw when then block is not template', async(() => {
const template = '<span *ngIf="booleanCondition; then thenBlock">IGNORE</span>' +
'<div #thenBlock>THEN</div>';

fixture = createTestComponent(template);

expect(() => fixture.detectChanges())
.toThrowError(/ngIfThen must be a TemplateRef, but received/);
}));

it('should throw when else block is not template', async(() => {
const template = '<span *ngIf="booleanCondition; else elseBlock">IGNORE</span>' +
'<div #elseBlock>ELSE</div>';

fixture = createTestComponent(template);

expect(() => fixture.detectChanges())
.toThrowError(/ngIfElse must be a TemplateRef, but received/);
}));
});
});
}

0 comments on commit 67cf11d

Please sign in to comment.