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({
4 selector: 'app-card',
5 standalone: true,
6 changeDetection: ChangeDetectionStrategy.OnPush,
7 template: `
8 <article class="card">
9 <header class="card__header">
10 <ng-content select="[card-title]">
11 <span class="card__title--fallback">Untitled</span>
12 </ng-content>
13 <div class="card__actions">
14 <ng-content select="[card-actions]"></ng-content>
15 </div>
16 </header>
17 
18 <div class="card__media">
19 <ng-content select="img, video, [card-media]"></ng-content>
20 </div>
21 
22 <div class="card__body">
23 <ng-content></ng-content>
24 </div>
25 
26 <footer class="card__footer">
27 <ng-content select="card-footer"></ng-content>
28 </footer>
29 </article>
30 `,
31 styles: [`
32 .card { display: flex; flex-direction: column; border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden; }
33 .card__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
34 .card__media img, .card__media video { width: 100%; display: block; }
35 .card__body { padding: 1rem; }
36 .card__footer:empty { display: none; }
37 .card__footer { padding: 0.75rem 1rem; border-top: 1px solid #f0f0f0; }
38 `],
39})
40export class CardComponent {}
01 / 01
STEP 01

Walkthrough

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

Related explainers

typescript 
import { Controller } from '@nestjs/common';
import {
  MessagePattern,
  Payload,

Manual RabbitMQ acks in a NestJS controller

microservices message-queue acknowledgement
Intermediate 8 steps
typescript 
type LazyImageOptions = {
  rootMargin?: string;
  loadedClass?: string;
};

Lazy-loading images with IntersectionObserver

intersectionobserver lazy-loading performance
Intermediate 7 steps
typescript 
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;
 

Type-safe deep merge in TypeScript

recursion conditional-types mapped-types
Advanced 7 steps
typescript 
type CurrencyFormatOptions = {
  locale?: string;
  currency: string;
  showDecimals?: boolean;

Caching Intl.NumberFormat for currency

memoization internationalization caching
Intermediate 9 steps
typescript 
import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository, DeepPartial } from 'typeorm';
import { User } from './entities/user.entity';

Building a CRUD service in NestJS

crud dependency-injection repository-pattern
Intermediate 7 steps
typescript 
type AsyncMethod = (...args: any[]) => Promise<any>;
 
function LogExecutionTime(thresholdMs = 0) {
  return function <T extends AsyncMethod>(

A method decorator that times async calls

decorators higher-order-functions async
Advanced 9 steps

Share this explainer

Here's the card — post it anywhere.

Multi-slot content projection in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code