Angular TypeScript Snippets

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: