feat(core): add support for fallback content in ng-content #54854
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
crisbeto
added
action: review
crisbeto
commented
Mar 14, 2024
crisbeto
force-pushed
the
ng-content-fallback
branch
from
692a1f8 to
2448101
Compare
pkozlowski-opensource
approved these changes
Mar 25, 2024
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.
crisbeto
force-pushed
the
ng-content-fallback
branch
from
2448101 to
623a491
Compare
atscott
approved these changes
Mar 25, 2024
crisbeto
added
action: merge
|
This PR was merged into the repository by commit 2fc11ea. |
dylhunn
pushed a commit
that referenced
this pull request
Mar 26, 2024
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
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds the ability to specify content that Angular should fall back to if nothing is projected into an
ng-contentslot. For example, if we have the following setupThe instance of
my-compin 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
ifblock goes fromtruetofalse.Fixes #12530.