Comprehensive Angular v19 snippets for TypeScript and HTML, including support for the latest Angular features. This extension was created to bridge the gap in resources for Angular’s newest capabilities, most existing code snippets are quite outdated.
This extension for VSCode adds snippets for the most common angular code. Adds snippets for:
- Standalone as default for directive, components, pipes...
- Signals (effect(), computed(), linkedSignal(), resource/rxResource(), input(), output())
- New Control flow (@if, @else, @for, @switch)
- Deferrable Views (@defer, @placeholder, @loading)
Type part of a snippet, press enter, and the snippet unfolds.
Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to activate snippets from within the editor.
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
| Snippet | Purpose |
|---|---|
component |
standalone component |
directive |
standalone directive |
pipe |
standalone pipe |
effect |
Angular effect function |
computed |
Angular computed signal |
linkedSignal |
Angular linkedSignal |
resource |
Angular resource |
rxResource |
Angular rxResource |
httpResource |
Angular httpResource |
inputRequired |
Angular required input signal |
inputOptional |
Angular optional input signal |
output |
Angular output signal |
| Snippet | Purpose |
|---|---|
@if |
Angular @if statement |
@if-else |
Angular @if @else statement |
@for |
Angular @for statement |
@switch |
Angular @switch statement |
@defer |
Angular @defer statement |
- Inspired by johnpapa snippets.
- Updated April 2025
Enjoy!