📦 SC Angular Snippets
⚡ Ready-made Angular snippets for faster Angular development.
Includes Components, Services, Interceptors, Pipes, Directives, Guards, Modules, and Resolvers.
🚀 Usage
Type the snippet prefix in a .ts file and press Tab / Enter to expand.
| Prefix |
Generates |
ng-svc |
Angular Service |
ng-cmp |
Angular Component (with template file) |
ng-cmp-inline |
Angular Component (inline template) |
ng-pipe |
Angular Pipe |
ng-dir |
Angular Directive |
ng-guard |
Angular Route Guard |
ng-mod |
Angular Module |
ng-resolver |
Angular Resolver |
ng-int |
HTTP Interceptor (basic) |
ng-int-auth |
HTTP Interceptor (with JWT token) |
📂 Installation
🔹 Option 1: Direct Snippet Import
- Open VS Code.
- Go to File > Preferences > Configure User Snippets.
- Create a new snippet file (or select
typescript.json).
- Paste the content of
angular-snippets.code-snippets.
- Restart VS Code.
- Start typing prefixes like
ng-svc, ng-cmp → press Tab → boom 🚀
🔹 Option 2: As VS Code Extension
- Download/Clone this repository.
- Folder structure should look like:
sc-angular-snippets/
│── package.json
│── README.md
│── snippets/
└── angular-snippets.code-snippets
- Open VS Code → Extensions → ⋮ (menu) → Install from VSIX.
- Select the built
.vsix / .zip file.
- Done ✅
📝 Example
Typing:
ng-svc
Expands to:
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root",
})
export class MyServiceService {
constructor() {}
}
👨💻 Author
Satendra Rajput
🔗 satendracoder.com
💼 LinkedIn: linkedin.com/in/satendracoder
📸 Instagram: instagram.com/satendracoder1
▶️ YouTube: youtube.com/@satendracoder
🐦 Twitter/X: twitter.com/satendracoder
| |
