From f62366fd1639839e531123230df6e46061a5d3ca Mon Sep 17 00:00:00 2001 From: dario-piotrowicz Date: Sun, 1 Aug 2021 13:30:47 +0100 Subject: [PATCH] docs: amend links in content-projection guide (#43009) PR Close #43009 --- aio/content/guide/content-projection.md | 56 ++++++++++++------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/aio/content/guide/content-projection.md b/aio/content/guide/content-projection.md index a98cdc312a..8c2e243bc4 100644 --- a/aio/content/guide/content-projection.md +++ b/aio/content/guide/content-projection.md @@ -23,43 +23,43 @@ The most basic form of content projection is *single-slot content projection*. S To create a component that uses single-slot content projection: -1. [Create](guide/component-overview) a component. +1. [Create a component](guide/component-overview#creating-a-component). -1. In the template for your component, add an `ng-content` element where you want the projected content to appear. +1. In the template for your component, add an `` element where you want the projected content to appear. -For example, the following component uses an `ng-content` element to display a message. +For example, the following component uses an `` element to display a message. -With the `ng-content` element in place, users of this component can now project their own message into the component. For example: +With the `` element in place, users of this component can now project their own message into the component. For example:
-The `ng-content` element is a placeholder that does not create a real DOM element. Custom attributes applied to `ng-content` are ignored. +The `` element is a placeholder that does not create a real DOM element. Custom attributes applied to `` are ignored.
{@a multi-slot} ## Multi-slot content projection -A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of `ng-content`. +A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of ``. To create a component that uses multi-slot content projection: -1. [Create](guide/component-overview) a component. +1. [Create a component](guide/component-overview#creating-a-component). -1. In the template for your component, add an `ng-content` element where you want the projected content to appear. +1. In the template for your component, add an `` element where you want the projected content to appear. -1. Add a `select` attribute to the `ng-content` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class. +1. Add a `select` attribute to the `` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class. - For example, the following component uses two `ng-content` elements. + For example, the following component uses two `` elements. -Content that uses the `question` attribute is projected into the `ng-content` element with the `select=[question]` attribute. +Content that uses the `question` attribute is projected into the `` element with the `select=[question]` attribute. @@ -68,9 +68,9 @@ region="multi-slot">
ng-content without a select attribute
-If your component includes an `ng-content` element without a `select` attribute, that instance receives all projected components that do not match any of the other `ng-content` elements. +If your component includes an `` element without a `select` attribute, that instance receives all projected components that do not match any of the other `` elements. -In the preceding example, only the second `ng-content` element defines a `select` attribute. As a result, the first `ng-content` element receives any other content projected into the component. +In the preceding example, only the second `` element defines a `select` attribute. As a result, the first `` element receives any other content projected into the component. @@ -78,41 +78,41 @@ In the preceding example, only the second `ng-content` element defines a `select ## Conditional content projection -If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `ng-template` element that contains the content you want to conditionally render. +If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `` element that contains the content you want to conditionally render. -Using an `ng-content` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `ng-content` element or if that `ng-content` element is inside of an `ngIf` statement. +Using an `` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `` element or if that `` element is inside of an `ngIf` statement. -With an `ng-template` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `ng-template` element until that element is explicitly rendered. +With an `` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `` element until that element is explicitly rendered. -The following steps demonstrate a typical implementation of conditional content projection using `ng-template`. +The following steps demonstrate a typical implementation of conditional content projection using ``. -1. [Create](guide/component-overview) a component. +1. [Create a component](guide/component-overview#creating-a-component). -1. In the component that accepts an `ng-template` element, use an `ng-container` element to render that template, such as: +1. In the component that accepts an `` element, use an `` element to render that template, such as: - This example uses the `ngTemplateOutlet` directive to render a given `ng-template` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `ng-container` element because the component does not need to render a real DOM element. + This example uses the `ngTemplateOutlet` directive to render a given `` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `` element because the component does not need to render a real DOM element. -1. Wrap the `ng-container` element in another element, such as a `div` element, and apply your conditional logic. +1. Wrap the `` element in another element, such as a `div` element, and apply your conditional logic. -1. In the template where you want to project content, wrap the projected content in an `ng-template` element, such as: +1. In the template where you want to project content, wrap the projected content in an `` element, such as: - The `ng-template` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or [`TemplateRef`](/api/core/TemplateRef), by using either the [`@ContentChild`](/api/core/ContentChild) or [`@ContentChildren`](/api/core/ContentChildren) decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `ng-template` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the [`ngTemplateOutlet`](/api/common/NgTemplateOutlet) directive, or with [`ViewContainerRef.createEmbeddedView`](/api/core/ViewContainerRef#createembeddedview). + The `` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or `TemplateRef`, by using either the `@ContentChild` or `@ContentChildren` decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the `ngTemplateOutlet` directive, or with the `ViewContainerRef` method `createEmbeddedView()`. -1. Create a directive with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance. +1. [Create an attribute directive](guide/attribute-directives#building-an-attribute-directive) with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance. - In the previous step, you added an `ng-template` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference. + In the previous step, you added an `` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference. 1. In the component you want to project content into, use `@ContentChild` to get the template of the projected content. @@ -144,14 +144,14 @@ For instance, consider the following HTML snippet: -This example uses an `ng-container` attribute to simulate projecting a component into a more complex structure. +This example uses an `` attribute to simulate projecting a component into a more complex structure.
Reminder!
-The `ng-container` element is a logical construct that you can use to group other DOM elements; however, the `ng-container` itself is not rendered in the DOM tree. +The `` element is a logical construct that you can use to group other DOM elements; however, the `` itself is not rendered in the DOM tree.
-In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `ng-container` element is projected into a component using the `[question]` selector. +In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `` element is projected into a component using the `[question]` selector.