Dynamic component loading in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is dynamic component loading in Angular?

Dynamic component loading means creating and inserting components into the app at runtime, not just when the app starts. It lets you add parts of the UI only when needed.

beginner

Which Angular service is commonly used to load components dynamically?

The ViewContainerRef service is used to create and insert components dynamically into the view.

intermediate

What is the role of ComponentFactoryResolver in dynamic component loading?

It helps create a factory for the component you want to load dynamically. This factory is then used to create the component instance.

intermediate

How do you clean up a dynamically loaded component in Angular?

You call the destroy() method on the component reference to remove it and free resources.

beginner

Why use dynamic component loading instead of static components?

It improves performance by loading components only when needed, and allows flexible UI changes without rebuilding the app.

Which Angular directive is used as a placeholder to insert a dynamic component?

A <ng-template>

B <div>

C <component>

D <router-outlet>

The directive acts as a placeholder where dynamic components can be inserted.

What method on ViewContainerRef inserts a component dynamically?

A insertComponent()

B appendChild()

C loadComponent()

D createComponent()

The createComponent() method creates and inserts a component dynamically into the container.

Which Angular version introduced the simplified dynamic component loading without ComponentFactoryResolver?

A Angular 9

B Angular 13

C Angular 14

D Angular 16

Angular 14 introduced a simpler API for dynamic component loading without needing ComponentFactoryResolver.

What is the type of object returned when you create a dynamic component?

A ComponentRef

B ElementRef

C ViewRef

D TemplateRef

Creating a dynamic component returns a ComponentRef, which represents the created component instance.

Which Angular feature helps to pass data to a dynamically loaded component?

A Router parameters

B Input properties

C Direct DOM manipulation

D Services only

Input properties can be set on the ComponentRef instance to pass data to the dynamic component.

Explain how to load a component dynamically in Angular step-by-step.

Think about the services and methods Angular provides for dynamic loading.

Describe benefits and use cases for dynamic component loading in Angular apps.

Consider why you might not want to load all components at once.