Angular TypeScript Snippets suitable for V19
Works with Angular v19. Snippets for TypeScript and HTML.
Developed due to the lack of snippets for the latest Angular features.
Features
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(), input(), output())
- New Control flow (@if, @else, @for, @switch)
- Deferrable Views (@defer, @placeholder, @loading)
Usage
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.
Requirements
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
TypeScript Angular Snippets
Snippet |
Purpose |
component |
standalone component |
directive |
standalone directive |
pipe |
standalone pipe |
effect |
Angular effect function |
computed |
Angular computed signal |
inputRequired |
Angular required input signal |
inputOptional |
Angular optional input signal |
output |
Angular output signal |
HTML Angular Snippets
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 October 2024
Enjoy!
| |