Custom structural directives in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom structural directive selector.

Angular

@Directive({ selector: '[[1]]' })
export class HighlightDirective {}

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

AmyHighlight

Bhighlight

CappHighlight

DcustomHighlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using a selector without square brackets.

Using a selector that is not a valid attribute name.

The selector for a structural directive is usually a bracketed attribute name. 'highlight' is the correct attribute name here.

2fill in blank

medium

Complete the constructor to inject the TemplateRef needed for the directive.

Angular

constructor(private [1]: TemplateRef<any>) {}

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

AviewContainer

BelementRef

Crenderer

DtemplateRef

Attempts:

3 left

💡 Hint

Common Mistakes

Injecting ElementRef instead of TemplateRef.

Using a variable name that does not match the injected type.

TemplateRef is injected with a variable name like 'templateRef' to access the template inside the directive.

3fill in blank

hard

Fix the error in the directive to properly create an embedded view.

Angular

constructor(private templateRef: TemplateRef<any>, private [1]: ViewContainerRef) {}

ngOnInit() {
  this.[1].createEmbeddedView(this.templateRef);
}

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

AviewContainer

BcontainerRef

CviewContainerRef

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name that does not match the injected type.

Not injecting ViewContainerRef at all.

The correct Angular service to create embedded views is ViewContainerRef, commonly named 'viewContainerRef'.

4fill in blank

hard

Fill both blanks to conditionally render the template based on the input property.

Angular

@Input() set appIf(condition: boolean) {
  if (condition) {
    this.[1].createEmbeddedView(this.[2]);
  } else {
    this.[1].clear();
  }
}

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

AviewContainerRef

BtemplateRef

CcontainerRef

Dtemplate

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the roles of ViewContainerRef and TemplateRef.

Using incorrect variable names that do not match injected services.

The ViewContainerRef is used to create or clear views, and TemplateRef is the template to render.

5fill in blank

hard

Fill all three blanks to create a structural directive that repeats a template N times.

Angular

@Input() set appRepeat(count: number) {
  this.[1].clear();
  for (let i = 0; i < count; i++) {
    this.[2].createEmbeddedView(this.[3]);
  }
}

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

AviewContainerRef

CtemplateRef

Attempts:

3 left

💡 Hint

Common Mistakes

Not clearing the container before adding views.

Using wrong variable names for injected services.

Clear the view container, then create embedded views from the template the specified number of times.