feat(core): add support for fallback content in ng-content #54854

crisbeto · 2024-03-14T08:26:57Z

Adds the ability to specify content that Angular should fall back to if nothing is projected into an ng-content slot. For example, if we have the following setup

@Component({
  selector: 'my-comp',
  template: `
    <ng-content select="header">Default header</ng-content>
    <ng-content select="footer">Default footer</ng-content>
  `
})
class MyComp {}

@Component({
  template: `
    <my-comp>
      <footer>New footer</footer>
    </my-comp>
  `
})
class MyApp {}

The instance of my-comp in the app will have the default header and the new footer.

Note: Angular's content projection happens during creation time. This means that dynamically changing the contents of the slot will not cause the default content to show up, e.g. if a if block goes from true to false.

Fixes #12530.

packages/core/test/acceptance/content_spec.ts

packages/core/src/render3/instructions/projection.ts

packages/core/test/acceptance/content_spec.ts

pkozlowski-opensource

LGTM overall, thank you for adding very thorough tests. The only addition I could think of are tests for re-projection with the default content.

Updates the template AST to capture the content of `ng-content` elements instead of throwing an error.

Updates the code that generates the `projection` instruction to pass the template function containing the default content into it.

…o template type checker Adds logic to ingest the content of an `ng-content` element in the template type checker. We treat `ng-content` as a `ScopedNode`, because its content is inserted conditionally.

Adds the ability to specify content that Angular should fall back to if nothing is projected into an `ng-content` slot. For example, if we have the following setup ``` @component({ selector: 'my-comp', template: ` <ng-content select="header">Default header</ng-content> <ng-content select="footer">Default footer</ng-content> ` }) class MyComp {} @component({ template: ` <my-comp> <footer>New footer</footer> </my-comp> ` }) class MyApp {} ``` The instance of `my-comp` in the app will have the default header and the new footer. **Note:** Angular's content projection happens during creation time. This means that dynamically changing the contents of the slot will not cause the default content to show up, e.g. if a `if` block goes from `true` to `false`. Fixes angular#12530.

Moves the logic that declares a template out into a separate function so that it can be reused in other places like control flow and defer, without having to call directly into the `template` instruction.

… content Passes the attributes of the `ng-content` element to the container that is created for the fallback content so that it can be re-projected into the same slot.

atscott

reviewed-for: language-service

dylhunn · 2024-03-26T16:18:02Z

This PR was merged into the repository by commit 2fc11ea.

…54854) Updates the code that generates the `projection` instruction to pass the template function containing the default content into it. PR Close #54854

…o template type checker (#54854) Adds logic to ingest the content of an `ng-content` element in the template type checker. We treat `ng-content` as a `ScopedNode`, because its content is inserted conditionally. PR Close #54854

Adds the ability to specify content that Angular should fall back to if nothing is projected into an `ng-content` slot. For example, if we have the following setup ``` @component({ selector: 'my-comp', template: ` <ng-content select="header">Default header</ng-content> <ng-content select="footer">Default footer</ng-content> ` }) class MyComp {} @component({ template: ` <my-comp> <footer>New footer</footer> </my-comp> ` }) class MyApp {} ``` The instance of `my-comp` in the app will have the default header and the new footer. **Note:** Angular's content projection happens during creation time. This means that dynamically changing the contents of the slot will not cause the default content to show up, e.g. if a `if` block goes from `true` to `false`. Fixes #12530. PR Close #54854

#54854) Moves the logic that declares a template out into a separate function so that it can be reused in other places like control flow and defer, without having to call directly into the `template` instruction. PR Close #54854

… content (#54854) Passes the attributes of the `ng-content` element to the container that is created for the fallback content so that it can be re-projected into the same slot. PR Close #54854

…4854) Updates the template AST to capture the content of `ng-content` elements instead of throwing an error. PR Close angular#54854

…ngular#54854) Updates the code that generates the `projection` instruction to pass the template function containing the default content into it. PR Close angular#54854

…o template type checker (angular#54854) Adds logic to ingest the content of an `ng-content` element in the template type checker. We treat `ng-content` as a `ScopedNode`, because its content is inserted conditionally. PR Close angular#54854

…4854) Adds the ability to specify content that Angular should fall back to if nothing is projected into an `ng-content` slot. For example, if we have the following setup ``` @component({ selector: 'my-comp', template: ` <ng-content select="header">Default header</ng-content> <ng-content select="footer">Default footer</ng-content> ` }) class MyComp {} @component({ template: ` <my-comp> <footer>New footer</footer> </my-comp> ` }) class MyApp {} ``` The instance of `my-comp` in the app will have the default header and the new footer. **Note:** Angular's content projection happens during creation time. This means that dynamically changing the contents of the slot will not cause the default content to show up, e.g. if a `if` block goes from `true` to `false`. Fixes angular#12530. PR Close angular#54854

angular#54854) Moves the logic that declares a template out into a separate function so that it can be reused in other places like control flow and defer, without having to call directly into the `template` instruction. PR Close angular#54854

… content (angular#54854) Passes the attributes of the `ng-content` element to the container that is created for the fallback content so that it can be re-projected into the same slot. PR Close angular#54854

angular-automatic-lock-bot · 2024-04-26T00:08:47Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime target: major This PR is targeted for the next major release labels Mar 14, 2024

ngbot bot added this to the Backlog milestone Mar 14, 2024

angular-robot bot added the detected: feature PR contains a feature commit label Mar 14, 2024

crisbeto requested a review from pkozlowski-opensource March 14, 2024 08:51

crisbeto marked this pull request as ready for review March 14, 2024 08:51

pullapprove bot requested a review from atscott March 14, 2024 08:51

crisbeto modified the milestones: Backlog, v18-candidates Mar 14, 2024

crisbeto commented Mar 14, 2024

View reviewed changes

packages/core/test/acceptance/content_spec.ts Show resolved Hide resolved

crisbeto force-pushed the ng-content-fallback branch from 692a1f8 to 2448101 Compare March 14, 2024 20:19

pkozlowski-opensource reviewed Mar 25, 2024

View reviewed changes

packages/core/src/render3/instructions/projection.ts Outdated Show resolved Hide resolved

pkozlowski-opensource reviewed Mar 25, 2024

View reviewed changes

packages/core/test/acceptance/content_spec.ts Show resolved Hide resolved

pkozlowski-opensource reviewed Mar 25, 2024

View reviewed changes

packages/core/test/acceptance/content_spec.ts Show resolved Hide resolved

pkozlowski-opensource approved these changes Mar 25, 2024

View reviewed changes

crisbeto added 6 commits March 25, 2024 13:33

refactor(compiler-cli): capture ng-content children in AST

168cc2e

Updates the template AST to capture the content of `ng-content` elements instead of throwing an error.

refactor(compiler): pass default content to projection instruction

efb5037

Updates the code that generates the `projection` instruction to pass the template function containing the default content into it.

refactor(compiler-cli): integrate fallback content for ng-content int…

f459335

…o template type checker Adds logic to ingest the content of an `ng-content` element in the template type checker. We treat `ng-content` as a `ScopedNode`, because its content is inserted conditionally.

refactor(core): move template declaration logic into reusable function

efdfc71

Moves the logic that declares a template out into a separate function so that it can be reused in other places like control flow and defer, without having to call directly into the `template` instruction.

fix(core): account for re-projected ng-content elements with fallback…

623a491

… content Passes the attributes of the `ng-content` element to the container that is created for the fallback content so that it can be re-projected into the same slot.

crisbeto force-pushed the ng-content-fallback branch from 2448101 to 623a491 Compare March 25, 2024 14:13

atscott approved these changes Mar 25, 2024

View reviewed changes

crisbeto added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 25, 2024

dylhunn closed this in c734808 Mar 26, 2024

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(core): add support for fallback content in ng-content #54854

feat(core): add support for fallback content in ng-content #54854

crisbeto commented Mar 14, 2024

pkozlowski-opensource left a comment

atscott left a comment

dylhunn commented Mar 26, 2024

angular-automatic-lock-bot bot commented Apr 26, 2024

feat(core): add support for fallback content in ng-content #54854

feat(core): add support for fallback content in ng-content #54854

Conversation

crisbeto commented Mar 14, 2024

pkozlowski-opensource left a comment

Choose a reason for hiding this comment

atscott left a comment

Choose a reason for hiding this comment

dylhunn commented Mar 26, 2024

angular-automatic-lock-bot bot commented Apr 26, 2024