https://github.com/JMGomes/angular-latest-snippets

Angular Snippets for VSCode
https://github.com/JMGomes/angular-latest-snippets

Last synced: about 1 month ago
JSON representation

Angular Snippets for VSCode

• Host: GitHub
• URL: https://github.com/JMGomes/angular-latest-snippets
• Owner: JMGomes
• License: mit
• Created: 2024-10-22T21:44:54.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-04-11T07:55:07.000Z (2 months ago)
• Last Synced: 2025-04-11T09:55:46.120Z (2 months ago)
• Language: JavaScript
• Size: 3.52 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-angular - angular-latest-snippets - Comprehensive Angular v19 [snippets](https://marketplace.visualstudio.com/items?itemName=JMGomes.angular-latest-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. (Table of contents / Angular)
• fucking-awesome-angular - angular-latest-snippets - Comprehensive Angular v19 🌎 [snippets](marketplace.visualstudio.com/items?itemName=JMGomes.angular-latest-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. (Table of contents / Angular)

README

        
# Angular TypeScript Snippets suitable for V19

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.

![Demo Snippets](images/demo-snippets.gif)

## 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(), linkedSignal(), resource/rxResource(), 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               |

| `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                 |

## 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 April 2025

**Enjoy!**