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.

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

Installation

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

Credits

Thanks to the following contributors for the NgRx snippets:

• Wes Grimes
• Tim Deschryver