Angular cheatsheet

January 19, 2026

Typescript ·Angular

This post is a amalgamation of knowledge and other resources, to help me remember useful tools/tricks to build complex Angular web-applications.

Note that as of writing, the latest version of Angular v21.

Templating

When checking if a signal exists, you can assign the value of the signal to a new variable, within the if statement. (documentation)
```
@if (signalValue(); as value) {
 {{ value }}
}
```

When using a for-loop in a template, you can use @empty to provide markup for when there are no items in the list. (documentation)
```
@for (let item of items(); track $index) {
 {{ item }}
} @empty {
 no items!
}
```

[routerOutletData] allows for passing of data to sub-routes

// app.component.ts
export interface OutletData {
  username: string;
}

@Component({
  template: `@if (outletData(); as data) {
      <router-outlet [routerOutletData]="data" />
    } @else {
      <p>Loading...</p>
    }`
})
export class AppComponent {
  outletData = signal<OutletData | null>(null);
}

Then, the sub-route could look like this:

// home.component.ts
import { type OutletData } from 'app.component.ts';

@Component({
  template: `<p>Hi, {{ outlet().username }}!</p>`
})
export class ProjectPage {
  outlet = inject(ROUTER_OUTLET_DATA) as Signal<OutletData>;
}

When listening for key events, you can use (keydown.<key>) to only listen to that specific key. (documentation)

<input type="text" (keyup.enter)="submit()" />

<!-- Optional modifiers (matches shift + enter) -->
<input type="text" (keyup.shift.enter)="submit()" />

Event manager plugins

Event manager plugins are a way to create custom event handlers, like this one to prevent default events from executing:

import { Injectable } from '@angular/core';
import { EventManagerPlugin } from '@angular/platform-browser';

@Injectable()
export class PreventDefaultEventPlugin extends EventManagerPlugin {
  constructor() {
    super(document);
  }

  // Define which events this plugin supports
  override supports(eventName: string) {
    return /preventDefault/.test(eventName);
  }

  // Handle the event registration
  override addEventListener(
	element: HTMLElement,
	eventName: string,
	handler: Function
  ) {
    // Parse the event (e.g. 'submit.preventDefault')
    const [event] = eventName.split('.');

    const listener = (event: Event) => {
      // Actually prevent the default event
      event.preventDefault();
      handler(event);
    };

    element.addEventListener(event, listener);

    // Return cleanup function
    return () => element.removeEventListener(event, listener);
  }
}

Then, don’t forget to provide it in the providers array in the bootstrapApplication function

Directives

Directives can be used for all sorts of things, but in this example I use it to create a tab component:

@Directive({ selector: '[appTabListItem]' })
export class TabListItemDirective {
  public readonly templateRef = inject(TemplateRef<unknown>);
}

@Directive({ selector: '[appTabContent]' })
export class TabContentDirective {
  public readonly templateRef = inject(TemplateRef<unknown>);
}

@Directive({ selector: '[appTabsLayout]' })
export class TabsLayoutDirective {
  public readonly templateRef = inject(
    // By adding `list` and `content` here, we can
    // access them by using `let-list` in templates
    TemplateRef<{
      list: TemplateRef<unknown>;
      content: TemplateRef<unknown>;
    }>
  );
}

@Component({
  template: `<ng-container
    *ngTemplateOutlet="
      layout()!.templateRef;
      context: {
        list: listTemplate,
        content: contentTemplate,
      }
    "
  />`
})
export class TabsComponent {
  layout = contentChild(TabsLayoutDirective);
  listItems = contentChildren(TabListItemDirective);
  contents = contentChildren(TabContentDirective);
  activeIndex = signal(0);
}

Then to use it:

<app-tabs>
  <!-- Define a template for how to align the list and content -->
  <ng-template appTabsLayout let-list="list" let-content="content">
    <div class="grid size-full grid-cols-4">
      <div
        class="col-span-1 flex flex-col gap-1 border-r border-neutral-200 p-2 transition-colors dark:border-neutral-700"
      >
        <ng-container *ngTemplateOutlet="list" />
      </div>

      <div class="col-span-3 p-4">
        <ng-container *ngTemplateOutlet="content" />
      </div>
    </div>
  </ng-template>

  <!-- Then we can add as many tabs as we want -->
  <ng-template appTabListItem>
    <p>Tab 1</p>
  </ng-template>

  <ng-template appTabContent>
    <p>Some content here</p>
  </ng-template>

  <ng-template appTabListItem>
    <p>Tab 2</p>
  </ng-template>

  <ng-template appTabContent>
    <p>Some other content here</p>
  </ng-template>
</app-tabs>

Random snippets

Boolean input transformer

/**
 * @example
 * import { transform } from '@core/utils/merge-classes';
 *
 * class ExampleComponent {
 *  option = input(false, { transform })
 * }
 *
 * <example-component option />
 *
 * @param value
 * @returns boolean
 */
export function transform(value: boolean | string): boolean {
  return typeof value === 'string' ? value === '' : value;
}

Merge tailwind classes

import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function mergeClasses(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Component with selector that matches an input field

@Component({
  // note this selector is the same as the input below
  selector: '[appTooltip]',
  template: '<ng-content />', // show the original content
  host: {
    '[title]': 'tooltipContent()',
  },
})
export class TooltipComponent {
  appTooltip = input<string>('');

  // you can also use an alias to make this more readable:
  tooltipContent = input<string>('', {
    alias: 'appTooltip',
  });
}

Then you can use it like this:

@Component({
  template: `<p appTooltip="tooltip content">Hover over me to see the tooltip</p>`,
  imports: [TooltipComponent] // importing is important
})
export class ExampleComponent {}

Useful Angular