@@ -238,13 +216,13 @@
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 470bbd932f..8bc3a74cbe 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 73f1186035..1d8297a3b6 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)
-
+
{{hero.name}}
-
+
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index 0a2c64478c..5c3089c082 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 23ad652bb4..5061954ecb 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 f1246b9a88..174655f221 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 d3f39895c5..0000000000
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 80b70068a1..0000000000
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 b3517130c9..0000000000
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 40df795dbb..200174bcb0
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 e1137234c7..7ea39c9f7a 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 8943fd623b..fe9ee6f8ef 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 a8c32359dd..59cb9b2ec6 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 ccd91ec8bf..04f0e9dbdc 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -90,7 +90,7 @@ export interface CompilerOptions extends ts.CompilerOptions {
// Print extra information while running the compiler
trace?: boolean;
- // Whether to enable support for and the template attribute (true by default)
+ // Whether to enable support for and the template attribute (false by default)
enableLegacyTemplate?: boolean;
// Whether to enable lowering expressions lambdas and expressions in a reference value
diff --git a/packages/compiler/src/aot/compiler_factory.ts b/packages/compiler/src/aot/compiler_factory.ts
index f8155dad33..6fea0d80a7 100644
--- a/packages/compiler/src/aot/compiler_factory.ts
+++ b/packages/compiler/src/aot/compiler_factory.ts
@@ -65,7 +65,7 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
const config = new CompilerConfig({
defaultEncapsulation: ViewEncapsulation.Emulated,
useJit: false,
- enableLegacyTemplate: options.enableLegacyTemplate !== false,
+ enableLegacyTemplate: options.enableLegacyTemplate === true,
missingTranslation: options.missingTranslation,
preserveWhitespaces: options.preserveWhitespaces,
});
diff --git a/packages/compiler/src/config.ts b/packages/compiler/src/config.ts
index 12bab10a0b..935b13c480 100644
--- a/packages/compiler/src/config.ts
+++ b/packages/compiler/src/config.ts
@@ -36,7 +36,7 @@ export class CompilerConfig {
this.useJit = !!useJit;
this.jitDevMode = !!jitDevMode;
this.missingTranslation = missingTranslation || null;
- this.enableLegacyTemplate = enableLegacyTemplate !== false;
+ this.enableLegacyTemplate = enableLegacyTemplate === true;
this.preserveWhitespaces = preserveWhitespacesDefault(noUndefined(preserveWhitespaces));
}
}
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
index f5142322e5..6181051dbb 100644
--- a/packages/compiler/test/template_parser/template_parser_spec.ts
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -121,16 +121,19 @@ export function main() {
schemas?: SchemaMetadata[], preserveWhitespaces?: boolean) => TemplateAst[];
let console: ArrayConsole;
- function commonBeforeEach() {
+ function configureCompiler() {
+ console = new ArrayConsole();
beforeEach(() => {
- console = new ArrayConsole();
TestBed.configureCompiler({
providers: [
{provide: Console, useValue: console},
+ {provide: CompilerConfig, useValue: new CompilerConfig({enableLegacyTemplate: true})}
],
});
});
+ }
+ function commonBeforeEach() {
beforeEach(inject([TemplateParser], (parser: TemplateParser) => {
const someAnimation = new CompileAnimationEntryMetadata('someAnimation', []);
const someTemplate = compileTemplateMetadata({animations: [someAnimation]});
@@ -286,6 +289,7 @@ export function main() {
});
});
+ configureCompiler();
commonBeforeEach();
describe('security context', () => {
@@ -318,6 +322,7 @@ export function main() {
TestBed.configureCompiler({providers: [TEST_COMPILER_PROVIDERS, MOCK_SCHEMA_REGISTRY]});
});
+ configureCompiler();
commonBeforeEach();
describe('parse', () => {
@@ -2129,13 +2134,13 @@ The pipe 'test' could not be found ("{{[ERROR ->]a | test}}"): TestComp@0:2`);
});
- describe('Template Parser - opt-out `` support', () => {
+ describe('Template Parser - `` support disabled by default', () => {
beforeEach(() => {
TestBed.configureCompiler({
- providers: [{
- provide: CompilerConfig,
- useValue: new CompilerConfig({enableLegacyTemplate: false}),
- }],
+ providers: [
+ {provide: Console, useValue: console},
+ {provide: CompilerConfig, useValue: new CompilerConfig()}
+ ],
});
});
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index 573a4d40d2..962c088570 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -7,6 +7,7 @@
*/
import {CommonModule} from '@angular/common';
+import {CompilerConfig} from '@angular/compiler';
import {Compiler, ComponentFactory, ComponentRef, ErrorHandler, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleRef, OnDestroy, SkipSelf, ViewRef} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, PipeTransform} from '@angular/core/src/change_detection/change_detection';
import {getDebugContext} from '@angular/core/src/errors';
@@ -37,7 +38,14 @@ export function main() {
function declareTests({useJit}: {useJit: boolean}) {
describe('integration tests', function() {
- beforeEach(() => { TestBed.configureCompiler({useJit}); });
+ beforeEach(() => {
+ TestBed.configureCompiler({
+ useJit,
+ providers: [
+ {provide: CompilerConfig, useValue: new CompilerConfig({enableLegacyTemplate: true})}
+ ]
+ });
+ });
describe('react to record changes', function() {
it('should consume text node changes', () => {
diff --git a/packages/platform-browser-dynamic/src/compiler_factory.ts b/packages/platform-browser-dynamic/src/compiler_factory.ts
index 4403f1639b..b146f84402 100644
--- a/packages/platform-browser-dynamic/src/compiler_factory.ts
+++ b/packages/platform-browser-dynamic/src/compiler_factory.ts
@@ -160,7 +160,7 @@ export class JitCompilerFactory implements CompilerFactory {
useJit: true,
defaultEncapsulation: ViewEncapsulation.Emulated,
missingTranslation: MissingTranslationStrategy.Warning,
- enableLegacyTemplate: true,
+ enableLegacyTemplate: false,
};
this._defaultOptions = [compilerOptions, ...defaultOptions];
diff --git a/packages/tsc-wrapped/src/options.ts b/packages/tsc-wrapped/src/options.ts
index d43f3b6e9b..8efa7243c0 100644
--- a/packages/tsc-wrapped/src/options.ts
+++ b/packages/tsc-wrapped/src/options.ts
@@ -76,7 +76,7 @@ interface Options extends ts.CompilerOptions {
// Print extra information while running the compiler
trace?: boolean;
- // Whether to enable support for and the template attribute (true by default)
+ // Whether to enable support for and the template attribute (false by default)
enableLegacyTemplate?: boolean;
// Whether to generate .ngsummary.ts files that allow to use AOTed artifacts