`
@@ -50,6 +49,3 @@ export class UnlessDirective {
// #enddocregion set
// #docregion skeleton
}
-// #enddocregion skeleton
-// #enddocregion no-docs
-// #enddocregion
diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade
index b32c0ec8f5..6584a1d170 100644
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@@ -147,7 +147,7 @@ figure.image-display
:marked
Notice the `hero` in the `ngFor` double-quoted instruction;
it is an example of a template input variable. Read
- more about template input variables in the [microsyntax](./template-syntax.html#ngForMicrosyntax) section of
+ more about template input variables in the [microsyntax](./template-syntax.html#microsyntax) section of
the [Template Syntax](./template-syntax.html) page.
Angular duplicates the `
` for each item in the list, setting the `hero` variable
diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade
index 45680e44e3..3b19546c36 100644
--- a/public/docs/ts/latest/guide/structural-directives.jade
+++ b/public/docs/ts/latest/guide/structural-directives.jade
@@ -1,7 +1,7 @@
block includes
include ../_util-fns
-// The docs standard h4 style uppercases, making code terms unreadable. Override it.
+//- The docs standard h4 style uppercases, making code terms unreadable. Override it.
style.
h4 {font-size: 17px !important; text-transform: none !important;}
.syntax { font-family: Consolas, 'Lucida Sans', Courier, sans-serif; color: black; font-size: 85%; }
@@ -15,13 +15,13 @@ style.
- [What are structural directives?](#definition)
- [*NgIf* case study](#ngIf)
- [Group sibling elements with <ng-container>](#ng-container)
- - [The asterisk (\*) prefix](#asterisk)
- - [Inside *NgFor*](#ngfor)
+ - [The asterisk (*) prefix](#asterisk)
+ - [Inside *NgFor*](#ngFor)
- [microsyntax](#microsyntax)
- [template input variables](#template-input-variable)
- [one structural directive per element](#one-per-element)
- [Inside the *NgSwitch* directives](#ngSwitch)
- - [Prefer the (\*) prefix](#prefer-asterisk)
+ - [Prefer the (*) prefix](#prefer-asterisk)
- [The <template> element](#template)
- [Write a structural directive](#unless)
@@ -40,14 +40,17 @@ a#definition
The directive then does whatever it's supposed to do with that host element and its descendents.
Structural directives are easy to recognize.
- An asterisk (\*) precedes the directive attribute name as in this example.
-+makeExample('structural-directives/ts/src/app/app.component.html', 'ngif')(format=".")
+ An asterisk (*) precedes the directive attribute name as in this example.
+
++makeExcerpt('src/app/app.component.html', 'ngif', '')
+
:marked
No brackets. No parentheses. Just `*ngIf` set to a string.
- 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 "de-sugars" this notation into a marked-up `` that surrounds the
+ 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 `` that surrounds the
host element and its descendents.
Each structural directive does something different with that template.
@@ -56,7 +59,8 @@ a#definition
described in the [_Template Syntax_](template-syntax.html) guide and seen in samples throughout the Angular documentation.
Here's an example of them in a template:
-+makeExample('structural-directives/ts/src/app/app.component.html', 'built-in')(format=".")
++makeExcerpt('src/app/app.component.html', 'built-in', '')
+
:marked
This guide won't repeat how to _use_ them. But it does explain _how they work_
and how to [write your own](#unless) structural directive.
@@ -77,7 +81,8 @@ a#definition
.l-sub-section
:marked
- There are two other kinds of Angular directives, described extensively elsewhere: (1) components and (2) attribute directives.
+ There are two other kinds of Angular directives, described extensively elsewhere:
+ (1) components and (2) attribute directives.
A *component* manages a region of HTML in the manner of a native HTML element.
Technically it's a directive with a template.
@@ -93,12 +98,12 @@ a#definition
a#ngIf
.l-main-section
:marked
- ## NgIf Case Study
+ ## NgIf case study
`NgIf` is the simplest structural directive and the easiest to understand.
- It takes a boolean value and makes an entire chunk of the DOM appear or disappear.
+ It takes a boolean expression and makes an entire chunk of the DOM appear or disappear.
-+makeExample('structural-directives/ts/src/app/app.component.html', 'ngif-true')(format=".")
++makeExcerpt('src/app/app.component.html', 'ngif-true', '')
:marked
The `ngIf` directive doesn't hide elements with CSS. It adds and removes them physically from the DOM.
@@ -119,13 +124,15 @@ figure.image-display
### Why *remove* rather than *hide*?
A directive could hide the unwanted paragraph instead by setting its `display` style to `none`.
-+makeExample('structural-directives/ts/src/app/app.component.html', 'display-none')(format=".")
+
++makeExcerpt('src/app/app.component.html', 'display-none', '')
:marked
While invisible, the element remains in the DOM.
figure.image-display
img(src='/resources/images/devguide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM")
+
:marked
The difference between hiding and removing doesn't matter for a simple paragraph.
It does matter when the host element is attached to a resource intensive component.
@@ -159,13 +166,13 @@ a#ng-container
There's often a _root_ element that can and should host the structural directive.
The list element (`
`) is a typical host element of an `NgFor` repeater.
-+makeExample('structural-directives/ts/src/app/app.component.html', 'ngfor-li')(format=".")
++makeExcerpt('src/app/app.component.html', 'ngfor-li', '')
:marked
When there isn't a host element, you can usually wrap the content in a native HTML container element,
such as a `
`, and attach the directive to that wrapper.
-+makeExample('structural-directives/ts/src/app/app.component.html', 'ngif')(format=".")
++makeExcerpt('src/app/app.component.html', 'ngif', '')
:marked
Introducing another container element—typically a `` or `
`—to
@@ -175,27 +182,37 @@ a#ng-container
The grouping element may break the template appearance because CSS styles
neither expect nor accommodate the new layout.
For example, suppose you have the following paragraph layout.
-+makeExample('structural-directives/ts/src/app/app.component.html', 'ngif-span')(format=".")
+
++makeExcerpt('src/app/app.component.html', 'ngif-span', '')
+
:marked
You also have a CSS style rule that happens to apply to a `` within a `
`aragraph.
-+makeExample('structural-directives/ts/src/app/app.component.css', 'p-span')(format=".")
+
++makeExcerpt('src/app/app.component.css', 'p-span', '')
+
:marked
The constructed paragraph renders strangely.
+
figure.image-display
img(src='/resources/images/devguide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style")
+
:marked
The `p span` style, intended for use elsewhere, was inadvertently applied here.
Another problem: some HTML elements require all immediate children to be of a specific type.
- For example, the `