Angular TypeScript Snippets

v21.1.0 · by hudson-newey, johnpapa · added 3 November 2026

(Unofficial) Angular 21 TypeScript snippets

Snippets

How to install

With Forge Super installed, the button above opens the app on this extension, where you press Install. Nothing is installed until you do.

You can also open the Extensions panel in the app and search for Angular TypeScript Snippets. The extension's id is angular-snippets.

Don't have Forge Super yet? Download it here.

README

From the extension's repository, written by its authors and not by Mentenaz. See the source.

Angular TypeScript Snippets for Zed

Big thank you for johnpapa for his development and maintenance of the vscode-angular-snippets which this extension is based on.

Updated for Angular 21 release

This extension for Zed adds TypeScript snippets for Angular.

Demo using the a-service-httpclient snippet

Angular TypeScript Snippets

Snippet	Purpose
`a-component`	component
`a-component-inline`	component with inline template
`a-component-root`	root app component with router-outlet
`a-pipe`	pipe
`a-service`	service with injectable provided in root
`a-service-httpclient`	service with injected `HttpClient`
`a-ctor-skip-self`	angular `NgModule`'s `skipself` constructor
`a-directive`	directive
`a-guard-can-activate`	`CanActivateFn` guard
`a-guard-can-activate-child`	`CanActivateChildFn` guard
`a-guard-can-deactivate`	`CanDeactivate` guard
`a-guard-can-match`	`CanMatch` guard
`a-httpclient-get`	`httpClient.get` with Rx Observable
`a-http-interceptor`	Empty Angular `HttpInterceptor` for `HttpClient`
`a-http-interceptor-headers`	Angular `HttpInterceptor` that sets headers for `HttpClient`
`a-http-interceptor-logging`	Angular `HttpInterceptor` that logs traffic for `HttpClient`
`a-module`	module
`a-module-root`	root app module
`a-preload-opt-in-strategy`	custom preload strategy that allows choosing which routes to preload
`a-preload-network-strategy`	custom preload strategy that preloads based on network connectivity
`a-resolver`	functional route resolver
`a-resolver-injectable`	injectable route resolver
`a-routes`	Route definition file
`a-route-path-404`	404 route path
`a-route-path-default`	default route path
`a-route-path-with-children`	route path with children
`a-route-path-eager`	eager route path
`a-route-path-lazy`	lazy route path
`a-router-events`	listen to one or more router events
`a-route-params-subscribe`	subscribe to route parameters
`a-subscribe`	Rx Observable subscription
`a-trackby`	to create a track function in TypeScript for the `@for`
`a-rxjs-import`	import RxJs features
`a-rxjs-operators`	import RxJs operators
`a-output`	`output` signal
`a-input`	`input` signal
`a-signal`	Angular signal
`a-computed`	Computed signal
`a-linked-signal`	Linked signal
`a-inject`	`inject()` function

Local Installation

Launch Zed
Go to the "extensions" panel Ctrl + Shift + X (Windows/Linux) or Cmd + Shift + X (Mac)
Click "Install dev extension"
Locate the root of this repository, and select it
Reload Zed

Credits

Thanks to the following contributors for the NgRx snippets: