docs(structural-directives): <template> was replaced by <ng-template> (angular#3445)

Author: wKoza

public/docs/_examples/structural-directives/ts/src/app/app.component.html

@@ -48,11 +48,11 @@ <h2 id="ngIf">NgIf</h2>
 <!-- #enddocregion display-none -->
 
 <h4>NgIf with template</h4>
-<p>&lt;template&gt; element</p>
+<p>&lt;ng-template&gt; element</p>
 <!-- #docregion ngif-template -->
-<template [ngIf]="hero">
+<ng-template [ngIf]="hero">
   <div>{{hero.name}}</div>
-</template>
+</ng-template>
 <!-- #enddocregion ngif-template -->
 
 <p>template attribute</p>
@@ -140,9 +140,9 @@ <h2 id="ngFor">NgFor</h2>
 <!--#enddocregion inside-ngfor -->
 <p class="code">&lt;template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"&gt;</p>
 <!--#docregion inside-ngfor -->
-<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">
   <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
-</template>
+</ng-template>
 <!--#enddocregion inside-ngfor -->
 
 </div>
@@ -179,21 +179,21 @@ <h4>NgSwitch with <i>template</i> attribute</h4>
 </div>
 <!-- #enddocregion ngswitch-template-attr -->
 
-<h4>NgSwitch with &lt;template&gt;</h4>
+<h4>NgSwitch with &lt;ng-template&gt;</h4>
 <!-- #docregion ngswitch-template -->
 <div [ngSwitch]="hero?.emotion">
-  <template [ngSwitchCase]="'happy'">
+  <ng-template [ngSwitchCase]="'happy'">
     <happy-hero [hero]="hero"></happy-hero>
-  </template>
-  <template [ngSwitchCase]="'sad'">
+  </ng-template>
+  <ng-template [ngSwitchCase]="'sad'">
     <sad-hero [hero]="hero"></sad-hero>
-  </template>
-  <template [ngSwitchCase]="'confused'">
+  </ng-template>
+  <ng-template [ngSwitchCase]="'confused'">
     <confused-hero [hero]="hero"></confused-hero>
-  </template >
-  <template ngSwitchDefault>
+  </ng-template >
+  <ng-template ngSwitchDefault>
     <unknown-hero [hero]="hero"></unknown-hero>
-  </template>
+  </ng-template>
 </div>
 <!-- #enddocregion ngswitch-template -->
 
@@ -202,9 +202,9 @@ <h4>NgSwitch with &lt;template&gt;</h4>
 <h2>&lt;template&gt;</h2>
 <!-- #docregion template-tag -->
 <p>Hip!</p>
-<template>
+<ng-template>
   <p>Hip!</p>
-</template>
+</ng-template>
 <p>Hooray!</p>
 <!-- #enddocregion template-tag -->
 
@@ -242,9 +242,9 @@ <h4>UnlessDirective with template</h4>
   (A) &lt;p template="myUnless condition" class="code unless"&gt;
 </p>
 
-<template [myUnless]="condition">
+<ng-template [myUnless]="condition">
   <p class="code unless">
     (A) &lt;template [myUnless]="condition"&gt;
   </p>
-</template>
+</ng-template>
 

public/docs/_examples/template-syntax/ts/src/app/app.component.html

@@ -544,13 +544,13 @@ <h3>[ngStyle] binding to currentStyles - CSS property names</h3>
 
 <!-- NgIf binding with template (no *) -->
 
-<template [ngIf]="currentHero">Add {{currentHero.name}} with template</template>
+<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>
 
 <!-- Does not show because isActive is false! -->
 <div>Hero Detail removed from DOM (via template) because isActive is false</div>
-<template [ngIf]="isActive">
+<ng-template [ngIf]="isActive">
   <hero-detail></hero-detail>
-</template>
+</ng-template>
 
 <!-- #docregion NgIf-3 -->
 <!-- isSpecial is true -->

public/docs/ts/latest/guide/structural-directives.jade

@@ -23,10 +23,11 @@ style.
 
   * [Inside the *NgSwitch* directives](#ngSwitch)
   * [Prefer the (*) prefix](#prefer-asterisk)
-  * [The <template> element](#template)
+  * [The <ng-template> element](#template)
   * [Group sibling elements with <ng-container>](#ng-container)
   * [Write a structural directive](#unless)
 
+
   Try the <live-example></live-example>.
 
 a#definition
@@ -52,7 +53,7 @@ a#definition
   You'll learn in this guide that the [asterisk (*) is a convenience notation](#asterisk)
   and the string is a [_microsyntax_](#microsyntax) rather than the usual
   [template expression](template-syntax.html#template-expressions).
-  Angular desugars this notation into a marked-up `<template>` that surrounds the
+  Angular desugars this notation into a marked-up `<ng-template>` that surrounds the
   host element and its descendents. 
   Each structural directive does something different with that template.
 
@@ -116,7 +117,7 @@ figure.image-display
 
 :marked
   The top paragraph is in the DOM. The bottom, disused paragraph is not; 
-  in its place is a comment about "template bindings" (more about that [later](#asterisk)).
+  in its place is a comment about "bindings" (more about that [later](#asterisk)).
 
   When the condition is false, `NgIf` removes its host element from the DOM,
   detaches it from DOM events (the attachments that it made),
@@ -179,13 +180,13 @@ a#asterisk
 +makeExcerpt('src/app/app.component.html', 'ngif-template-attr', '')
 
 :marked
-  Then it translates the template _attribute_ into a template _element_, wrapped around the host element, like this.
+  Then it translates the template _attribute_ into a `<ng-template>` _element_, wrapped around the host element, like this.
 
 +makeExcerpt('src/app/app.component.html', 'ngif-template', '')
 
 :marked
-  * The `*ngIf` directive moved to the `<template>` element where it became a property binding,`[ngIf]`.
-  * The rest of the `<div>`, including its class attribute, moved inside the `<template>` element.
+  * The `*ngIf` directive moved to the `<ng-template>` element where it became a property binding,`[ngIf]`.
+  * The rest of the `<div>`, including its class attribute, moved inside the `<ng-template>` element.
 
   None of these forms are actually rendered. 
   Only the finished product ends up in the DOM.
@@ -194,8 +195,8 @@ figure.image-display
   img(src='/resources/images/devguide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM")
 
 :marked
-  Angular consumed the `<template>` content during its actual rendering and 
-  replaced the `<template>` with a diagnostic comment.
+  Angular consumed the `<ng-template>` content during its actual rendering and 
+  replaced the `<ng-template>` with a diagnostic comment.
 
   The [`NgFor`](#ngFor) and [`NgSwitch...`](#ngSwitch) directives follow the same pattern.
 
@@ -205,7 +206,7 @@ a#ngFor
   ## Inside _*ngFor_
 
   Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax through
-  template _attribute_ to template _element_. 
+  template _attribute_ to `<ng-template>` _element_. 
 
   Here's a full-featured application of `NgFor`, written all three ways:
 
@@ -221,15 +222,15 @@ a#ngFor
 .alert.is-helpful
   :marked
     Everything _outside_ the `ngFor` string stays with the host element 
-    (the `<div>`) as it moves inside the `<template>`. 
+    (the `<div>`) as it moves inside the `<ng-template>`. 
     In this example, the `[ngClass]="odd"` stays on the `<div>`.
 
 a#microsyntax
 :marked
   ### Microsyntax
 
   The Angular microsyntax lets you configure a directive in a compact, friendly string.
-  The microsyntax parser translates that string into attributes on the `<template>`:
+  The microsyntax parser translates that string into attributes on the `<ng-template>`:
 
   * The `let` keyword declares a [_template input variable_](#template-input-variable) 
   that you reference within the template. The input variables in this example are `hero`, `i`, and `odd`.
@@ -337,7 +338,7 @@ a#ngSwitch
 +makeExcerpt('src/app/app.component.html', 'ngswitch-template-attr', '')
 
 :marked
-  That, in turn, can be desugared into the `<template>` element form.
+  That, in turn, can be desugared into the `<ng-template>` element form.
 
 +makeExcerpt('src/app/app.component.html', 'ngswitch-template', '')
 
@@ -350,20 +351,19 @@ a#prefer-asterisk
   to host the directive.
 
   While there's rarely a good reason to apply a structural directive in template _attribute_ or _element_ form,
-  it's still important to know that Angular creates a `<template>` and to understand how it works.
-  You'll refer to the `<template>` when you [write your own structural directive](#unless).
+  it's still important to know that Angular creates a `<ng-template>` and to understand how it works.
+  You'll refer to the `<ng-template>` when you [write your own structural directive](#unless).
 
 a#template
 .l-main-section
 :marked
-  ## The *&lt;template&gt;*
+  ## The *&lt;ng-template&gt;*
 
-  The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template" target="_blank" title="MDN: Template Tag">HTML 5 &lt;template&gt;</a>
-  is a formula for rendering HTML.
+  The &lt;ng-template&gt; is an Angular element for rendering HTML.
   It is never displayed directly. 
-  In fact, before rendering the view, Angular _replaces_ the `<template>` and its contents with a comment.
+  In fact, before rendering the view, Angular _replaces_ the `<ng-template>` and its contents with a comment.
 
-  If there is no structural directive and you merely wrap some elements in a `<template>`,
+  If there is no structural directive and you merely wrap some elements in a `<ng-template>`,
   those elements disappear.
   That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!".
 
@@ -376,7 +376,7 @@ figure.image-display
   img(src='/resources/images/devguide/structural-directives/template-rendering.png' width="350" alt="template tag rendering")
 
 :marked
-  A structural directive puts a `<template>` to work
+  A structural directive puts a `<ng-template>` to work
   as you'll see when you [write your own structural directive](#unless).
 
 a#ngcontainer
@@ -526,11 +526,11 @@ a#unless
 
   A simple structural directive like this one creates an 
   [_embedded view_](../api/core/index/EmbeddedViewRef-class.html "API: EmbeddedViewRef")
-  from the Angular-generated `<template>` and inserts that view in a 
+  from the Angular-generated `<ng-template>` and inserts that view in a 
   [_view container_](../api/core/index/ViewContainerRef-class.html "API: ViewContainerRef")
   adjacent to the directive's original `<p>` host element.
 
-  You'll acquire the `<template>` contents with a
+  You'll acquire the `<ng-template>` contents with a
   [`TemplateRef`](../api/core/index/TemplateRef-class.html "API: TemplateRef")
   and access the _view container_ through a
   [`ViewContainerRef`](../api/core/index/ViewContainerRef-class.html "API: ViewContainerRef").
@@ -614,7 +614,7 @@ a#summary
 
   * that structural directives manipulate HTML layout.
   * to use [`<ng-container>`](#ngcontainer) as a grouping element when there is no suitable host element.
-  * that the Angular desugars [asterisk (*) syntax](#asterisk) into a `<template>`.
+  * that the Angular desugars [asterisk (*) syntax](#asterisk) into a `<ng-template>`.
   * how that works for the `NgIf`, `NgFor` and `NgSwitch` built-in directives.
-  * about the [_microsyntax_](#microsyntax) that expands into a [`<template>`](#template).
+  * about the [_microsyntax_](#microsyntax) that expands into a [`<ng-template>`](#template).
   * to write a [custom structural directive](#unless), `UnlessDirective`.

public/docs/ts/latest/guide/template-syntax.jade

@@ -1402,7 +1402,7 @@ a#microsyntax
   > *Take each hero in the `heroes` array, store it in the local `hero` looping variable, and
   make it available to the templated HTML for each iteration.*
 
-  Angular translates this instruction into a `<template>` around the host element,
+  Angular translates this instruction into a `<ng-template>` around the host element,
   then uses this template repeatedly to create a new set of elements and bindings for each `hero`
   in the list.