@ContentChild and content projection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the projected content using @ContentChild.

Angular

import { Component, ContentChild, AfterContentInit } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: '<p>Projected content: {{contentText}}</p>'
})
export class ChildComponent implements AfterContentInit {
  @ContentChild('projContent') [1];
  contentText = '';

  ngAfterContentInit() {
    this.contentText = this.projContent.nativeElement.textContent.trim();
  }
}

Drag options to blanks, or click blank then click option'

AprojContent

BcontentRef

CcontentChild

Dprojected

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not match the template reference variable.

Forgetting to use @ContentChild decorator.

The @ContentChild decorator is used to get a reference to the projected content by its template reference variable name, here 'projContent'.

2fill in blank

medium

Complete the code to project content inside the child component's template.

Angular

<child-comp>
  <div [1]="projContent">Hello from parent!</div>
</child-comp>

Drag options to blanks, or click blank then click option'

A*

B#

C@

D$

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' which is for structural directives.

Using '@' or '$' which are invalid in this context.

The '#' symbol defines a template reference variable in Angular templates, which can be accessed by @ContentChild in the child component.

3fill in blank

hard

Fix the error in the child component to correctly access the projected content's native element.

Angular

import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: '<p>Content: {{contentText}}</p>'
})
export class ChildComponent implements AfterContentInit {
  @ContentChild('projContent') projContent: [1];
  contentText = '';

  ngAfterContentInit() {
    this.contentText = this.projContent.nativeElement.textContent.trim();
  }
}

Drag options to blanks, or click blank then click option'

ARenderer2

BTemplateRef

CViewChild

DElementRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using TemplateRef which does not have nativeElement.

Using ViewChild instead of ContentChild.

To access the native DOM element of projected content, @ContentChild should be typed as ElementRef.

4fill in blank

hard

Fill both blanks to correctly define and use @ContentChild with a selector.

Angular

import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: '<div>Projected: {{text}}</div>'
})
export class ChildComponent implements AfterContentInit {
  @ContentChild([1]) content: ElementRef;
  text = '';

  ngAfterContentInit() {
    this.text = this.content?.nativeElement?.[2].trim();
  }
}

Drag options to blanks, or click blank then click option'

A'p'

BtextContent

CinnerHTML

D'div'

Attempts:

3 left

💡 Hint

Common Mistakes

Using innerHTML which returns HTML, not plain text.

Using a wrong selector that does not match projected content.

The @ContentChild decorator can select projected content by CSS selector like 'p'. The nativeElement's textContent property holds the text inside the element.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps projected elements' tag names to their trimmed text content.

Angular

import { Component, ContentChildren, QueryList, AfterContentInit, ElementRef } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: '<ng-content></ng-content>'
})
export class ChildComponent implements AfterContentInit {
  @ContentChildren([1]) elements!: QueryList<ElementRef>;
  contentMap: Record<string, string> = {};

  ngAfterContentInit() {
    this.contentMap = this.elements.reduce((acc, el) => {
      acc[el.nativeElement.tagName.toLowerCase()] = el.nativeElement.[2].[3]();
      return acc;
    }, {} as Record<string, string>);
  }
}

Drag options to blanks, or click blank then click option'

AElementRef

BtextContent

Ctrim

DTemplateRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using TemplateRef instead of ElementRef.

Forgetting to call trim() to remove extra spaces.

Use @ContentChildren with ElementRef to get all projected elements. Access their textContent and trim whitespace to build the map.