typescript 57 lines · 8 steps

Building a structural *appUnless directive in Angular

A custom structural directive that renders a template when a condition is false, with an else fallback and typed template context.

Explained by highlit
Angular Intermediate structural-directive template-rendering dependency-injection type-guards conditional-rendering
1import {
2 Directive,
3 Input,
4 TemplateRef,
5 ViewContainerRef,
6} from '@angular/core';
7 
8interface UnlessContext {
9 $implicit: boolean;
10 unless: boolean;
11}
12 
13@Directive({
14 selector: '[appUnless]',
15 standalone: true,
16})
17export class UnlessDirective {
18 private hasView = false;
19 private elseTemplate: TemplateRef<unknown> | null = null;
20 private context: UnlessContext = { $implicit: false, unless: false };
21 
22 constructor(
23 private readonly templateRef: TemplateRef<UnlessContext>,
24 private readonly viewContainer: ViewContainerRef,
25 ) {}
26 
27 @Input()
28 set appUnless(condition: boolean) {
29 this.context.$implicit = this.context.unless = condition;
30 this.updateView();
31 }
32 
33 @Input()
34 set appUnlessElse(template: TemplateRef<unknown> | null) {
35 this.elseTemplate = template;
36 this.updateView();
37 }
38 
39 private updateView(): void {
40 this.viewContainer.clear();
41 this.hasView = false;
42 
43 if (!this.context.unless) {
44 this.viewContainer.createEmbeddedView(this.templateRef, this.context);
45 this.hasView = true;
46 } else if (this.elseTemplate) {
47 this.viewContainer.createEmbeddedView(this.elseTemplate);
48 }
49 }
50 
51 static ngTemplateContextGuard(
52 _dir: UnlessDirective,
53 ctx: unknown,
54 ): ctx is UnlessContext {
55 return true;
56 }
57}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Structural directives control DOM by imperatively creating and clearing embedded views through ViewContainerRef.
  2. 2Input setters let a directive react to binding changes and re-render on the spot.
  3. 3ngTemplateContextGuard teaches the template type-checker the shape of variables exposed to the template.

Related explainers

typescript 
type RequestState<T, E = string> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T; fetchedAt: number }

Modeling request state with discriminated unions

discriminated-unions exhaustiveness-checking state-machine
Intermediate 8 steps
typescript 
type EventMap = Record<string, unknown[]>;
 
type Listener<Args extends unknown[]> = (...args: Args) => void;
 

A type-safe event emitter in TypeScript

generics mapped-types event-emitter
Advanced 8 steps
typescript 
import { inject } from '@angular/core';
import { ResolveFn, Router, ActivatedRouteSnapshot } from '@angular/router';
import { catchError, of, EMPTY } from 'rxjs';
import { Article } from './models/article';

Prefetching route data with an Angular resolver

route-resolver dependency-injection rxjs
Intermediate 6 steps
typescript 
interface Order {
  id: number;
  customerId: string;
  total: number;

A type-safe groupBy in TypeScript

generics reduce type-inference
Intermediate 6 steps
python 
import time
from dataclasses import dataclass, field
 
from fastapi import Depends, FastAPI, HTTPException, Request, status

Token-bucket rate limiting in FastAPI

rate-limiting token-bucket dependency-injection
Advanced 10 steps
java 
@Service
public class GitHubClient {
 
    private final WebClient webClient;

Calling the GitHub API with Spring WebClient

reactive http-client dependency-injection
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Building a structural *appUnless directive in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code