{"action":"created","comment":{"url":"https://api.github.com/repos/angular/angular/pulls/comments/91588743","pull_request_review_id":12096840,"id":91588743,"diff_hunk":"@@ -6,46 +6,144 @@\n  * found in the LICENSE file at https://angular.io/license\n  */\n \n-import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';\n+import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '@angular/core';\n+\n \n /**\n- * Removes or recreates a portion of the DOM tree based on an {expression}.\n+ * Conditionally includes a template based on the value of an `expression`.\n+ *\n+ * `ngIf` evaluates the expression and then renders the `then` or `else` template in its place.\n+ * `ngIf` has a `then` and an `else` template which is shown when expression is thruthy or falsy\n+ * respectively. Typically the:\n+ *  - `then` template is the inline template of `ngIf` unless bound to a different value.\n+ *  - `else` template is blank unless its bound.\n+ *\n+ * # Most common usage\n+ *\n+ * The most common usage of the `ngIf` is to conditionally show the inline template as seen in this\n+ * example:\n+ * {@example common/ngIf/ts/module.ts region='NgIfSimple'}\n+ *\n+ * # Showing alternative template using `else`\n+ *\n+ * At times it is important to display alternative template when the expression is falsy and inline\n+ * template is hidden. In such a case use the `else` binding as shown. Note that the `else` binding\n+ * points to a `<template>` labeled `#elseBlock`. The template can be defined anywhere in the\n+ * component view but is typically placed right after `ngIf` for readability.\n+ *\n+ * {@example common/ngIf/ts/module.ts region='NgIfElse'}\n  *\n- * If the expression assigned to `ngIf` evaluates to a falsy value then the element\n- * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.\n+ * # Using non-inlined `then` template\n  *\n- * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):\n+ * Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using\n+ * a binding (just like `else`.) Because it is a binding, the `then` template can change over time.\n+ * This example shows how `ngIf` can change its then template.\n+ *\n+ * {@example common/ngIf/ts/module.ts region='NgIfThenElse'}\n+ *\n+ * # Storing conditional result in a variable\n+ *\n+ * A common patter is that we need to show a set of properties from a same object, but if the\n+ * object is undefined, the we have to use the safe-traversal-operator to guard against\n+ * dereferencing a `null` value. This is especially the case when waiting on async data such as\n+ * when using the `async` pipe. For example:\n  *\n  * ```\n- * <div *ngIf=\"errorCount > 0\" class=\"error\">\n- *   <!-- Error message displayed when the errorCount property in the current context is greater\n- * than 0. -->\n- *   {{errorCount}} errors detected\n- * </div>\n+ * Hello {{ (userStream|async).?last }}, {{ (userStream|async).?first }}!\n  * ```\n  *\n+ * There are several inefficiencies in the above example.\n+ *  - We create multiple subscriptions on the `userStream`, one for each `async` pipe.\n+ *  - We have to place the `async` pipe in parenthesis.\n+ *  - We have to use the safe-traversal-operator `.?` to access properties.\n+ *  - We can not display an alternative screen while waiting for the data to arrive asynchronously.\n+ *\n+ * The example below shows a better way to achieve a better result.\n+ *\n+ * {@example common/ngIf/ts/module.ts region='NgIfThenElse'}\n+ *\n+ * Notice that:\n+ *  - We use only one `async` pipe and hence only one subscription gets created.\n+ *  - `ngIf` stores the result of the `userStream|async` in the `$implicit` location.\n+ *  - The `$implicit` can be bound to local `user` variable. The local `user` can than be bound\n+ *    repeatedly in a more efficient way.\n+ *  - No need to use the safe-traversal-operator `.?` to access properties as `ngIf` will only\n+ *    display the data if `userStream` returns a value.\n+ *  - We can display an alternative template while waiting for the data. (The alternative template\n+ *    can also bind the `$implicit` result of `ngIf` if needed.)\n+ *\n  * ### Syntax\n  *\n+ * Simple form:\n  * - `<div *ngIf=\"condition\">...</div>`\n  * - `<div template=\"ngIf condition\">...</div>`\n  * - `<template [ngIf]=\"condition\"><div>...</div></template>`","path":"modules/@angular/common/src/directives/ng_if.ts","position":85,"original_position":85,"commit_id":"83d7647d3a02a3bb72e10f50aa85b9ceb0cd2e2f","original_commit_id":"83d7647d3a02a3bb72e10f50aa85b9ceb0cd2e2f","user":{"login":"mhevery","id":111951,"avatar_url":"https://avatars.githubusercontent.com/u/111951?v=3","gravatar_id":"","url":"https://api.github.com/users/mhevery","html_url":"https://github.com/mhevery","followers_url":"https://api.github.com/users/mhevery/followers","following_url":"https://api.github.com/users/mhevery/following{/other_user}","gists_url":"https://api.github.com/users/mhevery/gists{/gist_id}","starred_url":"https://api.github.com/users/mhevery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhevery/subscriptions","organizations_url":"https://api.github.com/users/mhevery/orgs","repos_url":"https://api.github.com/users/mhevery/repos","events_url":"https://api.github.com/users/mhevery/events{/privacy}","received_events_url":"https://api.github.com/users/mhevery/received_events","type":"User","site_admin":false},"body":"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.","created_at":"2016-12-08T19:29:41Z","updated_at":"2016-12-08T19:54:12Z","html_url":"https://github.com/angular/angular/pull/13297#discussion_r91588743","pull_request_url":"https://api.github.com/repos/angular/angular/pulls/13297","_links":{"self":{"href":"https://api.github.com/repos/angular/angular/pulls/comments/91588743"},"html":{"href":"https://github.com/angular/angular/pull/13297#discussion_r91588743"},"pull_request":{"href":"https://api.github.com/repos/angular/angular/pulls/13297"}}},"pull_request":{"url":"https://api.github.com/repos/angular/angular/pulls/13297","id":97062479,"html_url":"https://github.com/angular/angular/pull/13297","diff_url":"https://github.com/angular/angular/pull/13297.diff","patch_url":"https://github.com/angular/angular/pull/13297.patch","issue_url":"https://api.github.com/repos/angular/angular/issues/13297","number":13297,"state":"open","locked":false,"title":"feat: ngIf now supports else; saves condition to local var","user":{"login":"mhevery","id":111951,"avatar_url":"https://avatars.githubusercontent.com/u/111951?v=3","gravatar_id":"","url":"https://api.github.com/users/mhevery","html_url":"https://github.com/mhevery","followers_url":"https://api.github.com/users/mhevery/followers","following_url":"https://api.github.com/users/mhevery/following{/other_user}","gists_url":"https://api.github.com/users/mhevery/gists{/gist_id}","starred_url":"https://api.github.com/users/mhevery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhevery/subscriptions","organizations_url":"https://api.github.com/users/mhevery/orgs","repos_url":"https://api.github.com/users/mhevery/repos","events_url":"https://api.github.com/users/mhevery/events{/privacy}","received_events_url":"https://api.github.com/users/mhevery/received_events","type":"User","site_admin":false},"body":"NgIf syntax has been extended to support else clause to display template\r\nwhen the condition is false. In addition the condition value can now \r\nbe stored in local variable, for later reuse. This is especially useful\r\nwhen used with the `async` pipe. \r\n\r\nExample:\r\n\r\n```\r\n<div *ngIf=\"userObservable | async; else loading; let user\">\r\n  Hello {{user.last}}, {{user.first}}!\r\n</div>\r\n<template #loading>Waiting...</template>\r\n```\r\n\r\nCloses #13061","created_at":"2016-12-08T05:42:10Z","updated_at":"2016-12-08T19:54:12Z","closed_at":null,"merged_at":null,"merge_commit_sha":"9502d2bf987243c0a1753ce5b3c2e03274edeff0","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/angular/angular/pulls/13297/commits","review_comments_url":"https://api.github.com/repos/angular/angular/pulls/13297/comments","review_comment_url":"https://api.github.com/repos/angular/angular/pulls/comments{/number}","comments_url":"https://api.github.com/repos/angular/angular/issues/13297/comments","statuses_url":"https://api.github.com/repos/angular/angular/statuses/83d7647d3a02a3bb72e10f50aa85b9ceb0cd2e2f","head":{"label":"mhevery:issue-13061","ref":"issue-13061","sha":"83d7647d3a02a3bb72e10f50aa85b9ceb0cd2e2f","user":{"login":"mhevery","id":111951,"avatar_url":"https://avatars.githubusercontent.com/u/111951?v=3","gravatar_id":"","url":"https://api.github.com/users/mhevery","html_url":"https://github.com/mhevery","followers_url":"https://api.github.com/users/mhevery/followers","following_url":"https://api.github.com/users/mhevery/following{/other_user}","gists_url":"https://api.github.com/users/mhevery/gists{/gist_id}","starred_url":"https://api.github.com/users/mhevery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhevery/subscriptions","organizations_url":"https://api.github.com/users/mhevery/orgs","repos_url":"https://api.github.com/users/mhevery/repos","events_url":"https://api.github.com/users/mhevery/events{/privacy}","received_events_url":"https://api.github.com/users/mhevery/received_events","type":"User","site_admin":false},"repo":{"id":24658749,"name":"angular","full_name":"mhevery/angular","owner":{"login":"mhevery","id":111951,"avatar_url":"https://avatars.githubusercontent.com/u/111951?v=3","gravatar_id":"","url":"https://api.github.com/users/mhevery","html_url":"https://github.com/mhevery","followers_url":"https://api.github.com/users/mhevery/followers","following_url":"https://api.github.com/users/mhevery/following{/other_user}","gists_url":"https://api.github.com/users/mhevery/gists{/gist_id}","starred_url":"https://api.github.com/users/mhevery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhevery/subscriptions","organizations_url":"https://api.github.com/users/mhevery/orgs","repos_url":"https://api.github.com/users/mhevery/repos","events_url":"https://api.github.com/users/mhevery/events{/privacy}","received_events_url":"https://api.github.com/users/mhevery/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/mhevery/angular","description":null,"fork":true,"url":"https://api.github.com/repos/mhevery/angular","forks_url":"https://api.github.com/repos/mhevery/angular/forks","keys_url":"https://api.github.com/repos/mhevery/angular/keys{/key_id}","collaborators_url":"https://api.github.com/repos/mhevery/angular/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/mhevery/angular/teams","hooks_url":"https://api.github.com/repos/mhevery/angular/hooks","issue_events_url":"https://api.github.com/repos/mhevery/angular/issues/events{/number}","events_url":"https://api.github.com/repos/mhevery/angular/events","assignees_url":"https://api.github.com/repos/mhevery/angular/assignees{/user}","branches_url":"https://api.github.com/repos/mhevery/angular/branches{/branch}","tags_url":"https://api.github.com/repos/mhevery/angular/tags","blobs_url":"https://api.github.com/repos/mhevery/angular/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/mhevery/angular/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/mhevery/angular/git/refs{/sha}","trees_url":"https://api.github.com/repos/mhevery/angular/git/trees{/sha}","statuses_url":"https://api.github.com/repos/mhevery/angular/statuses/{sha}","languages_url":"https://api.github.com/repos/mhevery/angular/languages","stargazers_url":"https://api.github.com/repos/mhevery/angular/stargazers","contributors_url":"https://api.github.com/repos/mhevery/angular/contributors","subscribers_url":"https://api.github.com/repos/mhevery/angular/subscribers","subscription_url":"https://api.github.com/repos/mhevery/angular/subscription","commits_url":"https://api.github.com/repos/mhevery/angular/commits{/sha}","git_commits_url":"https://api.github.com/repos/mhevery/angular/git/commits{/sha}","comments_url":"https://api.github.com/repos/mhevery/angular/comments{/number}","issue_comment_url":"https://api.github.com/repos/mhevery/angular/issues/comments{/number}","contents_url":"https://api.github.com/repos/mhevery/angular/contents/{+path}","compare_url":"https://api.github.com/repos/mhevery/angular/compare/{base}...{head}","merges_url":"https://api.github.com/repos/mhevery/angular/merges","archive_url":"https://api.github.com/repos/mhevery/angular/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/mhevery/angular/downloads","issues_url":"https://api.github.com/repos/mhevery/angular/issues{/number}","pulls_url":"https://api.github.com/repos/mhevery/angular/pulls{/number}","milestones_url":"https://api.github.com/repos/mhevery/angular/milestones{/number}","notifications_url":"https://api.github.com/repos/mhevery/angular/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/mhevery/angular/labels{/name}","releases_url":"https://api.github.com/repos/mhevery/angular/releases{/id}","deployments_url":"https://api.github.com/repos/mhevery/angular/deployments","created_at":"2014-09-30T22:59:23Z","updated_at":"2016-05-13T05:57:56Z","pushed_at":"2016-12-08T05:41:36Z","git_url":"git://github.com/mhevery/angular.git","ssh_url":"git@github.com:mhevery/angular.git","clone_url":"https://github.com/mhevery/angular.git","svn_url":"https://github.com/mhevery/angular","homepage":null,"size":35878,"stargazers_count":9,"watchers_count":9,"language":"TypeScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":9,"default_branch":"master"}},"base":{"label":"angular:master","ref":"master","sha":"13b41bd6310dd8c10d76deef45f157e0527b1707","user":{"login":"angular","id":139426,"avatar_url":"https://avatars.githubusercontent.com/u/139426?v=3","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"repo":{"id":24195339,"name":"angular","full_name":"angular/angular","owner":{"login":"angular","id":139426,"avatar_url":"https://avatars.githubusercontent.com/u/139426?v=3","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/angular/angular","description":null,"fork":false,"url":"https://api.github.com/repos/angular/angular","forks_url":"https://api.github.com/repos/angular/angular/forks","keys_url":"https://api.github.com/repos/angular/angular/keys{/key_id}","collaborators_url":"https://api.github.com/repos/angular/angular/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/angular/angular/teams","hooks_url":"https://api.github.com/repos/angular/angular/hooks","issue_events_url":"https://api.github.com/repos/angular/angular/issues/events{/number}","events_url":"https://api.github.com/repos/angular/angular/events","assignees_url":"https://api.github.com/repos/angular/angular/assignees{/user}","branches_url":"https://api.github.com/repos/angular/angular/branches{/branch}","tags_url":"https://api.github.com/repos/angular/angular/tags","blobs_url":"https://api.github.com/repos/angular/angular/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/angular/angular/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/angular/angular/git/refs{/sha}","trees_url":"https://api.github.com/repos/angular/angular/git/trees{/sha}","statuses_url":"https://api.github.com/repos/angular/angular/statuses/{sha}","languages_url":"https://api.github.com/repos/angular/angular/languages","stargazers_url":"https://api.github.com/repos/angular/angular/stargazers","contributors_url":"https://api.github.com/repos/angular/angular/contributors","subscribers_url":"https://api.github.com/repos/angular/angular/subscribers","subscription_url":"https://api.github.com/repos/angular/angular/subscription","commits_url":"https://api.github.com/repos/angular/angular/commits{/sha}","git_commits_url":"https://api.github.com/repos/angular/angular/git/commits{/sha}","comments_url":"https://api.github.com/repos/angular/angular/comments{/number}","issue_comment_url":"https://api.github.com/repos/angular/angular/issues/comments{/number}","contents_url":"https://api.github.com/repos/angular/angular/contents/{+path}","compare_url":"https://api.github.com/repos/angular/angular/compare/{base}...{head}","merges_url":"https://api.github.com/repos/angular/angular/merges","archive_url":"https://api.github.com/repos/angular/angular/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/angular/angular/downloads","issues_url":"https://api.github.com/repos/angular/angular/issues{/number}","pulls_url":"https://api.github.com/repos/angular/angular/pulls{/number}","milestones_url":"https://api.github.com/repos/angular/angular/milestones{/number}","notifications_url":"https://api.github.com/repos/angular/angular/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/angular/angular/labels{/name}","releases_url":"https://api.github.com/repos/angular/angular/releases{/id}","deployments_url":"https://api.github.com/repos/angular/angular/deployments","created_at":"2014-09-18T16:12:01Z","updated_at":"2016-12-08T17:06:28Z","pushed_at":"2016-12-08T19:24:38Z","git_url":"git://github.com/angular/angular.git","ssh_url":"git@github.com:angular/angular.git","clone_url":"https://github.com/angular/angular.git","svn_url":"https://github.com/angular/angular","homepage":"https://angular.io","size":653134,"stargazers_count":18675,"watchers_count":18675,"language":"TypeScript","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":4814,"mirror_url":null,"open_issues_count":988,"forks":4814,"open_issues":988,"watchers":18675,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/angular/angular/pulls/13297"},"html":{"href":"https://github.com/angular/angular/pull/13297"},"issue":{"href":"https://api.github.com/repos/angular/angular/issues/13297"},"comments":{"href":"https://api.github.com/repos/angular/angular/issues/13297/comments"},"review_comments":{"href":"https://api.github.com/repos/angular/angular/pulls/13297/comments"},"review_comment":{"href":"https://api.github.com/repos/angular/angular/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/angular/angular/pulls/13297/commits"},"statuses":{"href":"https://api.github.com/repos/angular/angular/statuses/83d7647d3a02a3bb72e10f50aa85b9ceb0cd2e2f"}}}}
{"actor":{"display_login":"mhevery"}}