diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade index 3b19546c36..fc84905169 100644 --- a/public/docs/ts/latest/guide/structural-directives.jade +++ b/public/docs/ts/latest/guide/structural-directives.jade @@ -14,7 +14,6 @@ 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) - [microsyntax](#microsyntax) @@ -23,6 +22,7 @@ style. - [Inside the *NgSwitch* directives](#ngSwitch) - [Prefer the (*) prefix](#prefer-asterisk) - [The <template> element](#template) + - [Group sibling elements with <ng-container>](#ng-container) - [Write a structural directive](#unless) Try the . @@ -157,108 +157,6 @@ figure.image-display Before applying a structural directive, you might want to pause for a moment to consider the consequences of adding and removing elements and of creating and destroying components. -a#ngcontainer -a#ng-container -.l-main-section -:marked - ## Group sibling elements with <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. - -+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. - -+makeExcerpt('src/app/app.component.html', 'ngif', '') - -:marked - Introducing another container element—typically a `` or `
    `—to - group the elements under a single _root_ is usually harmless. - _Usually_ ... but not _always_. - - 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. - -+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. - -+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 `