typescript 40 lines · 7 steps

Multi-slot content projection in Angular

An Angular card component distributes projected markup into named slots using ng-content selectors.

Explained by highlit

Angular Intermediate content-projection components templates change-detection css

1import { Component, ChangeDetectionStrategy } from '@angular/core';
2 
3@Component({
selector: 'app-card',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
  <article class="card">
    <header class="card__header">
      <ng-content select="[card-title]">
        <span class="card__title--fallback">Untitled</span>
      </ng-content>
      <div class="card__actions">
        <ng-content select="[card-actions]"></ng-content>
      </div>
    </header>
17 
    <div class="card__media">
      <ng-content select="img, video, [card-media]"></ng-content>
    </div>
21 
    <div class="card__body">
      <ng-content></ng-content>
    </div>
25 
    <footer class="card__footer">
      <ng-content select="card-footer"></ng-content>
    </footer>
  </article>
`,
styles: [`
  .card { display: flex; flex-direction: column; border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden; }
  .card__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
  .card__media img, .card__media video { width: 100%; display: block; }
  .card__body { padding: 1rem; }
  .card__footer:empty { display: none; }
  .card__footer { padding: 0.75rem 1rem; border-top: 1px solid #f0f0f0; }
`],
39})
40export class CardComponent {}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Multiple ng-content elements with select attributes let one component route projected content into distinct regions.
2Fallback content inside ng-content renders only when nothing matches that slot, giving sensible defaults.
3OnPush change detection plus a purely presentational template makes a component that only re-renders when inputs or projection change.

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';