@ContentChild and content projection in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is content projection in Angular?

Content projection lets you insert content from a parent component into a child component's template. It helps create reusable components that can display different content.

beginner

What does the @ContentChild decorator do in Angular?

@ContentChild finds a child element or directive inside the projected content of a component. It lets the component access and interact with that projected content.

intermediate

How do you use @ContentChild to get a reference to a projected element?

You add @ContentChild with a selector (like a template reference variable or a component/directive type) in the child component class. Angular sets that property to the matching projected element.

intermediate

Why is @ContentChild different from @ViewChild?

@ContentChild looks inside the content projected into the component (between its tags). @ViewChild looks inside the component's own template.

intermediate

When is the @ContentChild property available during the component lifecycle?

The @ContentChild property is available after Angular runs the ngAfterContentInit lifecycle hook. Before that, it might be undefined.

What does content projection allow you to do in Angular?

A Run code after the view initializes

B Insert external content into a child component's template

C Create new Angular modules

D Change the component's CSS styles dynamically

Content projection lets you insert content from a parent into a child component's template.

Which decorator lets you access projected content inside a component?

A @ContentChild

B @ViewChild

C @Input

D @Output

@ContentChild accesses elements inside projected content.

When is the @ContentChild property guaranteed to be set?

A ngOnInit

B ngAfterViewInit

C ngOnDestroy

D ngAfterContentInit

@ContentChild is set after ngAfterContentInit lifecycle hook.

What is the main difference between @ContentChild and @ViewChild?

A @ContentChild accesses projected content; @ViewChild accesses component's own template

B @ContentChild accesses inputs; @ViewChild accesses outputs

C @ContentChild is for services; @ViewChild is for directives

D They are exactly the same

@ContentChild looks inside projected content; @ViewChild looks inside the component template.

How do you select an element with @ContentChild?

A By CSS selector only

B By HTML tag name only

C By template reference variable or directive/component type

D By event binding

@ContentChild can select by template reference variable or directive/component type.

Explain how @ContentChild works with content projection in Angular.

Think about how a component can see content passed inside its tags.

Describe a simple example scenario where you would use @ContentChild with content projection.

Imagine a reusable panel component that needs to control a button passed inside it.