typescript 64 lines · 7 steps

Dynamic component rendering in Angular

A host component that instantiates any component at runtime from a descriptor and keeps its inputs in sync.

Explained by highlit

Angular Advanced dynamic-components viewcontainerref lifecycle-hooks change-detection

1import {
Component,
ComponentRef,
Injector,
Input,
OnChanges,
OnDestroy,
SimpleChanges,
Type,
ViewChild,
ViewContainerRef,
12} from '@angular/core';
13 
14export interface WidgetDescriptor<T = unknown> {
component: Type<T>;
inputs?: Partial<Record<keyof T & string, unknown>>;
17}
18 
19@Component({
selector: 'app-widget-host',
standalone: true,
template: '<ng-container #outlet />',
23})
24export class WidgetHostComponent implements OnChanges, OnDestroy {
@Input({ required: true }) descriptor!: WidgetDescriptor;
26 
@ViewChild('outlet', { read: ViewContainerRef, static: true })
private outlet!: ViewContainerRef;
29 
private ref?: ComponentRef<unknown>;
31 
constructor(private readonly injector: Injector) {}
33 
ngOnChanges(changes: SimpleChanges): void {
  const change = changes['descriptor'];
  if (!change) return;
37 
  if (change.currentValue?.component !== change.previousValue?.component) {
    this.render();
  } else {
    this.applyInputs();
  }
}
44 
private render(): void {
  this.outlet.clear();
  this.ref = this.outlet.createComponent(this.descriptor.component, {
    injector: this.injector,
  });
  this.applyInputs();
}
52 
private applyInputs(): void {
  if (!this.ref) return;
  for (const [key, value] of Object.entries(this.descriptor.inputs ?? {})) {
    this.ref.setInput(key, value);
  }
  this.ref.changeDetectorRef.markForCheck();
}
60 
ngOnDestroy(): void {
  this.ref?.destroy();
}
64}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1ViewContainerRef.createComponent lets you instantiate components at runtime without declaring them in a template.
2Comparing currentValue against previousValue in ngOnChanges lets you rebuild only when identity actually changes.
3Manually created components must be explicitly destroyed and marked for check since Angular won't manage them for you.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';