feat: ngIf now supports else; saves condition to local var #13297
Conversation
| * | ||
| * # Showing alternative template using `else` | ||
| * | ||
| * At times it is important to display alternative template when the expression is falsy and inline |
There was a problem hiding this comment.
Is "At times it is important" really necessary in API docs ?
May use the then / else template terminology introduced earlier ?
| * | ||
| * If the expression assigned to `ngIf` evaluates to a falsy value then the element | ||
| * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. | ||
| * # Using non-inlined `then` template |
There was a problem hiding this comment.
I think non-inlined makes more sense here.
| * | ||
| * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)): | ||
| * Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using | ||
| * a binding (just like `else`.) Because it is a binding, the `then` template can change over time. |
There was a problem hiding this comment.
Because they are bindings, templates reference can be changed over time ?
| * # Storing conditional result in a variable | ||
| * | ||
| * A common patter is that we need to show a set of properties from a same object, but if the | ||
| * object is undefined, the we have to use the safe-traversal-operator to guard against |
| * ``` | ||
| * | ||
| * There are several inefficiencies in the above example. | ||
| * - We create multiple subscriptions on the `userStream`, one for each `async` pipe. |
| * - We create multiple subscriptions on the `userStream`, one for each `async` pipe. | ||
| * - We have to place the `async` pipe in parenthesis. | ||
| * - We have to use the safe-traversal-operator `.?` to access properties. | ||
| * - We can not display an alternative screen while waiting for the data to arrive asynchronously. |
There was a problem hiding this comment.
move this one up (order by importance)
| * - We have to use the safe-traversal-operator `.?` to access properties. | ||
| * - We can not display an alternative screen while waiting for the data to arrive asynchronously. | ||
| * | ||
| * The example below shows a better way to achieve a better result. |
| * | ||
| * Notice that: | ||
| * - We use only one `async` pipe and hence only one subscription gets created. | ||
| * - `ngIf` stores the result of the `userStream|async` in the `$implicit` location. |
There was a problem hiding this comment.
do we need to mention implicit here (add a note below) or at all ?
| * ### Syntax | ||
| * | ||
| * Simple form: | ||
| * - `<div *ngIf="condition">...</div>` | ||
| * - `<div template="ngIf condition">...</div>` | ||
| * - `<template [ngIf]="condition"><div>...</div></template>` |
There was a problem hiding this comment.
I thought we had decided to document this <ng-container *ngIf>.
Can you update as part of this PR ?
There was a problem hiding this comment.
Turns out that we can't do that because <ng-container #foo> is not supported. We need to fix that first nad than come back and change this.
| * - `<div *ngIf="condition">...</div>` | ||
| * - `<div template="ngIf condition">...</div>` | ||
| * - `<template [ngIf]="condition"><div>...</div></template>` | ||
| * | ||
| * Form with an else block: | ||
| * - `<div *ngIf="condition; else elseBlock">...</div><template #elseBlock>...</template>` |
| this._hasView = false; | ||
| this._viewContainer.clear(); | ||
| this._context.$implicit = condition; | ||
| this._updateView(condition); |
There was a problem hiding this comment.
this._updateView(); remove useless param and use the context
| fixture = createTestComponent(template); | ||
|
|
||
| fixture.detectChanges(); | ||
| expect(getDOM().getText(fixture.nativeElement)).toEqual('TRUE'); |
There was a problem hiding this comment.
.toHaveText() doesn't work here ?
There was a problem hiding this comment.
changed (copy paste from existing test)
| expect(getDOM().getText(fixture.nativeElement)).toEqual('FALSE'); | ||
| })); | ||
|
|
||
| it('should support else', async(() => { |
| @@ -685,7 +685,7 @@ class TemplateParseVisitor implements html.Visitor { | |||
| } | |||
| elementProps.forEach(prop => { | |||
| this._reportError( | |||
| `Property binding ${prop.name} not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section.`, | |||
| `Property binding ${prop.name} not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".`, | |||
There was a problem hiding this comment.
not sure I understand, what you mean by imported.
There was a problem hiding this comment.
I think he means: Property binding ${prop.name} not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations" or imported by the @NgModule
| @@ -704,7 +704,7 @@ class TemplateParseVisitor implements html.Visitor { | |||
| events.forEach(event => { | |||
| if (isPresent(event.target) || !allDirectiveEvents.has(event.name)) { | |||
| this._reportError( | |||
| `Event binding ${event.fullName} not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "directives" section.`, | |||
| `Event binding ${event.fullName} not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations".`, | |||
| # Running the examples | ||
|
|
||
| ``` | ||
| ./build.sh # run only when framework code changes |
There was a problem hiding this comment.
could you the command above the line and chg to # execute the following command only ...
| ``` | ||
|
|
||
| NOTE: sometimes the http server does not exits properly and it retans the `8001` port. | ||
| in Such a case you can use `lsof -i:8001` to see which process it is and then use `kill` |
|
very sweet ! LGTM after comments are addressed. please aslo scope the commit messages by cmp. |
vicb
added
area: common
mhevery
removed
the
action: cleanup
|
@vicb please take another look. |
mhevery
force-pushed
the
issue-13061
branch
2 times, most recently
from
7f3b034 to
ca9c028
Compare
|
still failing CI |
vicb
added
the
action: cleanup
NgIf syntax has been extended to support else clause to display template
when the condition is false. In addition the condition value can now
be stored in local variable, for later reuse. This is especially useful
when used with the `async` pipe.
Example:
```
<div *ngIf="userObservable | async; else loading; let user">
Hello {{user.last}}, {{user.first}}!
</div>
<template #loading>Waiting...</template>
```
Closes angular#13061
|
finally green, and all comments addressed. |
| ./modules/@angular/examples/test.sh | ||
| ``` | ||
|
|
||
| NOTE: sometimes the http server does not exits properly and it retans the `8001` port. |
There was a problem hiding this comment.
does not exits -> does not exit
it retans -> it retains
There was a problem hiding this comment.
@souldreamer I'll fix when merging the PR. thanks
vicb
added
action: merge
|
How do I know which version of Angular will have this? Is this documented anywhere? Thanks |
|
@DzmitryShylovich, thanks, just found that too. I assume that means not going 2.x? Pity... |
|
@OndraZizka nope. this feature is 4.x only |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
NgIf syntax has been extended to support else clause to display template
when the condition is false. In addition the condition value can now
be stored in local variable, for later reuse. This is especially useful
when used with the
asyncpipe.Example:
Closes #13061