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 
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';
import { ApiProperty } from '@nestjs/swagger';

Wiring validation and Swagger docs in NestJS

validation openapi decorators
Intermediate 8 steps
python 
from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, status
from pydantic import BaseModel, EmailStr
from sqlalchemy.orm import Session
 

Building a signup endpoint in FastAPI

dependency-injection request-validation background-tasks
Intermediate 8 steps
typescript 
import { Component, Input } from '@angular/core';
 
interface Order {
  id: string;

How Angular ICU plurals localize an order summary

i18n pluralization standalone-component
Intermediate 8 steps
php 
<?php
 
namespace App\Providers;
 

Subdomain multi-tenancy routing in Laravel

multi-tenancy service-container route-binding
Advanced 7 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
type CsvColumn<T> = {
  header: string;
  value: (row: T) => string | number | boolean | null | undefined;
};

Building a type-safe CSV writer in TypeScript

generics serialization escaping
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