diff --git a/aio/content/examples/ngcontainer/src/app/app.component.html b/aio/content/examples/ngcontainer/src/app/app.component.html index afd0b00f3601d..33a68fecaf010 100644 --- a/aio/content/examples/ngcontainer/src/app/app.component.html +++ b/aio/content/examples/ngcontainer/src/app/app.component.html @@ -92,22 +92,22 @@

#3 <ng-container> and <p>

- The hero.id in the <template *ngIf> disappears: + The hero.id in the <ng-template *ngIf> disappears:

- + Name: {{hero.name}}

- The hero.id in the <template [ngIf]> + The hero.id in the <ng-template [ngIf]> is unaffected by the p-span CSS:

- + Name: {{hero.name}}

diff --git a/aio/content/examples/structural-directives/e2e-spec.ts b/aio/content/examples/structural-directives/e2e-spec.ts index 51f30bf0bbc96..dbf96a49e142f 100644 --- a/aio/content/examples/structural-directives/e2e-spec.ts +++ b/aio/content/examples/structural-directives/e2e-spec.ts @@ -18,9 +18,9 @@ describe('Structural Directives', function () { expect(allLis.get(0).getText()).toEqual('Mr. Nice'); }); - it('ngSwitch have three instances', function () { + it('ngSwitch have two instances', function () { const happyHeroEls = element.all(by.tagName('happy-hero')); - expect(happyHeroEls.count()).toEqual(3); + expect(happyHeroEls.count()).toEqual(2); }); it('should toggle *ngIf="hero" with a button', function () { diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html index 9f5de0b8f4f1f..00a88e3aa7d70 100644 --- a/aio/content/examples/structural-directives/src/app/app.component.html +++ b/aio/content/examples/structural-directives/src/app/app.component.html @@ -55,11 +55,6 @@

NgIf with template

-

template attribute

- -
{{hero.name}}
- -

<ng-container>

@@ -131,14 +126,7 @@

NgFor

-

<div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">

- -
- ({{i}}) {{hero.name}} -
- - -

<template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">

+

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/>

({{i}}) {{hero.name}}
@@ -169,16 +157,6 @@

NgSwitch

-

NgSwitch with template attribute

- -
- - - - -
- -

NgSwitch with <ng-template>

@@ -199,7 +177,7 @@

NgSwitch with <ng-template>


-

<template>

+

<ng-template>

Hip!

@@ -238,13 +216,13 @@

UnlessDirective with template

Show this sentence unless the condition is true.

-

- (A) <p template="myUnless condition" class="code unless"> +

+ (A) <p *myUnless="condition" class="code unless">

- (A) <template [myUnless]="condition"> + (A) <ng-template [myUnless]="condition">

diff --git a/aio/content/examples/structural-directives/src/app/unless.directive.ts b/aio/content/examples/structural-directives/src/app/unless.directive.ts index 470bbd932f178..8bc3a74cbef91 100644 --- a/aio/content/examples/structural-directives/src/app/unless.directive.ts +++ b/aio/content/examples/structural-directives/src/app/unless.directive.ts @@ -19,8 +19,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; * ### Syntax * * - `
...
` - * - `
...
` - * - `` + * - `
...
` * // #docregion no-docs */ diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html index 73f1186035c65..1d8297a3b67fe 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.html +++ b/aio/content/examples/template-syntax/src/app/app.component.html @@ -78,11 +78,11 @@

Template input variable expression context (let hero)

- +

Template reference variable expression context (#heroInput)

diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index 0a2c64478cf4f..5c3089c0828ef 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -208,17 +208,7 @@ Here is `*ngIf` displaying the hero's name if `hero` exists. The asterisk is "syntactic sugar" for something a bit more complicated. -Internally, Angular desugars it in two stages. -First, it translates the `*ngIf="..."` into a template _attribute_, `template="ngIf ..."`,  like this. - - - - - - - - -Then it translates the template _attribute_ into a `` _element_, wrapped around the host element, like this. +Internally, Angular translates the `*ngIf` _attribute_ into a `` _element_, wrapped around the host element, like this. @@ -230,8 +220,7 @@ Then it translates the template _attribute_ into a `` _element_, wr * The `*ngIf` directive moved to the `` element where it became a property binding,`[ngIf]`. * The rest of the `
`, including its class attribute, moved inside the `` element. -None of these forms are actually rendered. -Only the finished product ends up in the DOM. +The first form is not actually rendered, only the finished product ends up in the DOM.
@@ -252,10 +241,9 @@ The [`NgFor`](guide/structural-directives#ngFor) and [`NgSwitch...`](guide/struc ## Inside _*ngFor_ -Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax through -template _attribute_ to `` _element_. +Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax to `` _element_. -Here's a full-featured application of `NgFor`, written all three ways: +Here's a full-featured application of `NgFor`, written both ways: @@ -415,16 +403,7 @@ The `` is the host element for the `*ngSwitchDefault`. As with other structural directives, the `NgSwitchCase` and `NgSwitchDefault` -can be desugared into the template _attribute_ form. - - - - - - - - -That, in turn, can be desugared into the `` element form. +can be desugared into the `` element form. @@ -438,7 +417,7 @@ That, in turn, can be desugared into the `` element form. ## Prefer the asterisk (*) syntax. -The asterisk (*) syntax is more clear than the other desugared forms. +The asterisk (*) syntax is more clear than the desugared form. Use [<ng-container>](guide/structural-directives#ng-container) when there's no single element to host the directive. diff --git a/aio/content/images/guide/structural-directives/element-not-in-dom.png b/aio/content/images/guide/structural-directives/element-not-in-dom.png index 23ad652bb4c91..5061954ecb497 100644 Binary files a/aio/content/images/guide/structural-directives/element-not-in-dom.png and b/aio/content/images/guide/structural-directives/element-not-in-dom.png differ diff --git a/aio/content/images/guide/structural-directives/hero-div-in-dom.png b/aio/content/images/guide/structural-directives/hero-div-in-dom.png index f1246b9a8896b..174655f221c34 100644 Binary files a/aio/content/images/guide/structural-directives/hero-div-in-dom.png and b/aio/content/images/guide/structural-directives/hero-div-in-dom.png differ diff --git a/aio/content/images/guide/structural-directives/myUnless-is-true.png b/aio/content/images/guide/structural-directives/myUnless-is-true.png deleted file mode 100644 index d3f39895c598b..0000000000000 Binary files a/aio/content/images/guide/structural-directives/myUnless-is-true.png and /dev/null differ diff --git a/aio/content/images/guide/structural-directives/ngIf-and-myUnless.png b/aio/content/images/guide/structural-directives/ngIf-and-myUnless.png deleted file mode 100644 index 80b70068a1c62..0000000000000 Binary files a/aio/content/images/guide/structural-directives/ngIf-and-myUnless.png and /dev/null differ diff --git a/aio/content/images/guide/structural-directives/ngSwitch-rendering.png b/aio/content/images/guide/structural-directives/ngSwitch-rendering.png deleted file mode 100644 index b3517130c9893..0000000000000 Binary files a/aio/content/images/guide/structural-directives/ngSwitch-rendering.png and /dev/null differ diff --git a/aio/content/images/guide/structural-directives/template-rendering.png b/aio/content/images/guide/structural-directives/template-rendering.png old mode 100644 new mode 100755 index 40df795dbbd7c..200174bcb0014 Binary files a/aio/content/images/guide/structural-directives/template-rendering.png and b/aio/content/images/guide/structural-directives/template-rendering.png differ diff --git a/packages/common/src/directives/ng_for_of.ts b/packages/common/src/directives/ng_for_of.ts index e1137234c7301..7ea39c9f7a341 100644 --- a/packages/common/src/directives/ng_for_of.ts +++ b/packages/common/src/directives/ng_for_of.ts @@ -79,7 +79,6 @@ export class NgForOfContext { * ### Syntax * * - `
  • ...
  • ` - * - `
  • ...
  • ` * * With `` element: * diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts index 8943fd623b8bd..fe9ee6f8ef59d 100644 --- a/packages/common/src/directives/ng_if.ts +++ b/packages/common/src/directives/ng_if.ts @@ -75,7 +75,6 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from ' * * Simple form: * - `
    ...
    ` - * - `
    ...
    ` * - `
    ...
    ` * * Form with an else block: diff --git a/packages/compiler-cli/src/codegen.ts b/packages/compiler-cli/src/codegen.ts index a8c32359ddb5c..59cb9b2ec6058 100644 --- a/packages/compiler-cli/src/codegen.ts +++ b/packages/compiler-cli/src/codegen.ts @@ -101,7 +101,7 @@ export class CodeGenerator { translations: transContent, i18nFormat: cliOptions.i18nFormat || undefined, locale: cliOptions.locale || undefined, missingTranslation, - enableLegacyTemplate: options.enableLegacyTemplate !== false, + enableLegacyTemplate: options.enableLegacyTemplate === true, enableSummariesForJit: options.enableSummariesForJit !== false, preserveWhitespaces: options.preserveWhitespaces, }); diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts index cc8860968cce9..0dad6ae63ace6 100644 --- a/packages/compiler-cli/src/transformers/api.ts +++ b/packages/compiler-cli/src/transformers/api.ts @@ -84,7 +84,7 @@ export interface CompilerOptions extends ts.CompilerOptions { // Print extra information while running the compiler trace?: boolean; - // Whether to enable support for