Dynamic component loading in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular core module needed for dynamic component loading.

Angular

import { [1] } from '@angular/core';

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

ANgModule

BInjectable

CComponentFactoryResolver

DDirective

Attempts:

3 left

💡 Hint

Common Mistakes

Importing NgModule instead of ComponentFactoryResolver

Using Injectable which is for services

Using Directive which is for attribute or structural directives

The ComponentFactoryResolver is used to create component factories for dynamic loading.

2fill in blank

medium

Complete the code to get a reference to the container where the dynamic component will be inserted.

Angular

@ViewChild('container', { read: [1] }) containerRef!: ViewContainerRef;

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

ATemplateRef

BViewContainerRef

CElementRef

DRenderer2

Attempts:

3 left

💡 Hint

Common Mistakes

Using ElementRef which references DOM elements but not containers

Using TemplateRef which is for templates, not containers

Using Renderer2 which is for DOM manipulation

ViewContainerRef is needed to insert components dynamically into the view.

3fill in blank

hard

Fix the error in the code to create a component dynamically using the resolver.

Angular

const factory = this.componentFactoryResolver.[1](MyDynamicComponent);
this.containerRef.clear();
this.containerRef.createComponent(factory);

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

AresolveComponentFactory

BcreateComponentFactory

CgetComponentFactory

DmakeComponentFactory

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like createComponentFactory

Using getComponentFactory which does not exist

Using makeComponentFactory which is invalid

The correct method to get a component factory is resolveComponentFactory.

4fill in blank

hard

Fill both blanks to clear the container and insert the new component.

Angular

this.containerRef.[1]();
this.containerRef.[2](factory);

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

Aclear

BcreateComponent

Cinsert

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using remove instead of clear to empty the container

Using insert instead of createComponent to add the component

First, clear the container with clear(), then create the component with createComponent().

5fill in blank

hard

Fill all three blanks to define a dynamic component loader method that creates and inserts a component.

Angular

loadComponent() {
  const factory = this.[1].[2](DynamicComponent);
  this.containerRef.[3]();
  this.containerRef.createComponent(factory);
}

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

AcomponentFactoryResolver

BresolveComponentFactory

Cclear

DcreateComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong service name for the resolver

Skipping clearing the container before insertion

Using wrong method names

The method uses componentFactoryResolver to get the factory, calls resolveComponentFactory, then clears the container before creating the component.