javascript / expert
Snippet
Reactive Projection Control with Signal-Based contentChild Queries
Replacing the legacy @ContentChild decorator, the contentChild() signal query allows components to reactively detect and interact with projected content. This approach integrates seamlessly with the signal graph, enabling computed properties to update automatically based on the presence or change of children in the content projection slot.
snippet.js
javascript
1
2
3
4
5
@Component({ ... })export class CardComponent {header = contentChild(CardHeaderDirective);hasHeader = computed(() => !!this.header());}
angular
Breakdown
1
header = contentChild(CardHeaderDirective);
Creates a signal that tracks the presence of a specific directive within the projected content.
2
hasHeader = computed(() => !!this.header());
Derives a reactive boolean state based on whether the projected element exists.