### Start Angular Dev Server

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Runs the `ng s` command in the configured working directory terminal. Useful for starting the development server.

```typescript
// Triggered via: Right-click workspace root → Angular File Generator → Start Server
// Command ID: angular.terminal.start
// Equivalent CLI command:
ng s
// With angular.terminal.cwd = "packages/my-app", runs in that subdirectory
```

--------------------------------

### Generated Angular Component File (Legacy Naming)

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

This example shows the content of a generated Angular component file using legacy naming conventions (e.g., `user.component.ts`). It assumes standalone components are enabled and uses SCSS for styling.

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent {}

```

--------------------------------

### Generate Jasmine/TestBed Spec File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a Jasmine/TestBed `describe` block with a `beforeEach` injection setup. Prompts for the class name and type, always outputting a `.spec.ts` file.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Test
// Command ID: angular.file.spec
// Inputs: name = "User", type = "service"
// Output filename: user.spec.ts

import { TestBed } from '@angular/core/testing';

import { UserService } from './user.service';

describe('UserService', () => {
  let service: UserService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(UserService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});
```

--------------------------------

### Generated Angular Component File (Angular 20+ Naming)

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

This example demonstrates the content of a generated Angular component file using Angular 20+ naming conventions (e.g., `user.ts`) when `omitSuffix` is set to true. It also assumes standalone components are enabled.

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user.html',
  styleUrls: ['./user.scss'],
})
export class User {}

```

--------------------------------

### Configure Custom Commands and Templates with Placeholders

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define custom commands and templates in settings.json using dynamic placeholders like {{ComponentName}}, {{entityName}}, and {{style}}. The extension prompts for these values and substitutes them before execution.

```jsonc
"angular.submenu.customCommands": [
  {
    "name": "Custom Component",
    "command": "ng g c",
    "args": "{{entityName}} --style {{style}} --standalone true --change-detection OnPush"
  }
],
"angular.submenu.templates": [
  {
    "name": "Corporate Component",
    "description": "Component with header + basic logging",
    "type": "component",
    "template": [
      "import { Component } from '@angular/core';",
      "@Component({",
      "  selector: 'app-{{entityName}}',",
      "  templateUrl: './{{entityName}}.component.html',",
      "  styleUrls: ['./{{entityName}}.component.{{style}}'],",
      "})",
      "export class {{ComponentName}}Component {",
      "  constructor() { }",
      "}"
    ]
  }
]
```

--------------------------------

### Configure File Grouping and Path Display

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define patterns for grouping files and whether to display the folder path alongside filenames. Aids in organizing and identifying file locations.

```json
"angular.files.watch": "modules,"
```

```json
"angular.files.showPath": true
```

--------------------------------

### Configure File Inclusion and Exclusion

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Set which file extensions to include and glob patterns to exclude from the file list. Useful for customizing the displayed files in the sidebar.

```json
"angular.files.include": ["ts"]
```

```json
"angular.files.exclude": "**/node_modules/**"
```

--------------------------------

### Register and Manage Sidebar File Tree Provider

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Implements `TreeDataProvider<NodeModel>` to display project TypeScript files grouped by type in the Activity Bar. It uses an internal cache with promise deduplication and debounced auto-refresh.

```typescript
// Provider registered by ExtensionRuntime.registerTreeViews():
const listFilesProvider = new ListFilesProvider();

window.createTreeView('angular.listFilesView', {
  treeDataProvider: listFilesProvider,
  showCollapseAll: true,
});

// Manual refresh (e.g. after adding files outside the editor):
// Command ID: angular.listFiles.refreshList
listFilesProvider.refresh();

// Sidebar display example (with angular.files.watch = ["modules","components","services"]):
// ▼ Modules: 12
//     ├─ app.module.ts          (src/app)
//     ├─ auth.module.ts         (src/app/auth)
// ▼ Components: 34
//     ├─ header.component.ts    (src/app/shared/header)
//     └─ user-list.component.ts (src/app/features/users)
// ▼ Services: 8
//     └─ auth.service.ts        (src/app/auth)

```

--------------------------------

### ListFilesProvider

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Implements `TreeDataProvider<NodeModel>` to display project TypeScript files grouped by type (modules, components, services) in the Activity Bar panel. It uses an internal cache with promise deduplication and debounced auto-refresh on file save/create/delete.

```APIDOC
## `ListFilesProvider` — Sidebar file tree provider

Implements `TreeDataProvider<NodeModel>` to display project TypeScript files grouped by type (modules, components, services) in the Activity Bar panel. Uses an internal cache with promise deduplication and debounced auto-refresh on file save/create/delete.

```typescript
// Provider registered by ExtensionRuntime.registerTreeViews():
const listFilesProvider = new ListFilesProvider();

window.createTreeView('angular.listFilesView', {
  treeDataProvider: listFilesProvider,
  showCollapseAll: true,
});

// Manual refresh (e.g. after adding files outside the editor):
// Command ID: angular.listFiles.refreshList
listFilesProvider.refresh();

// Sidebar display example (with angular.files.watch = ["modules","components","services"]):
// ▼ Modules: 12
//     ├─ app.module.ts          (src/app)
//     ├─ auth.module.ts         (src/app/auth)
// ▼ Components: 34
//     ├─ header.component.ts    (src/app/shared/header)
//     └─ user-list.component.ts (src/app/features/users)
// ▼ Services: 8
//     └─ auth.service.ts        (src/app/auth)
```
```

--------------------------------

### Generate Angular Component with CLI

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this command to generate a new Angular component via the extension. It mirrors the functionality of the Angular CLI's `ng generate component` command.

```bash
ng generate component path/to/my-feature
```

--------------------------------

### saveFile

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Safely writes a generated file into the workspace. It handles directory creation, prevents path traversal, detects duplicates, supports cancellation, and provides progress notifications.

```APIDOC
## `saveFile(directoryPath, filename, fileContent, config)` — Write generated file to workspace

Safely writes a generated file into the workspace with directory creation, path traversal prevention, duplicate detection, cancellation support, and progress notification.

```typescript
import { saveFile } from './src/app/helpers/save-file.helper';

// Called internally by all FileController generators
await saveFile(
  'src/app/features/user',   // relative to workspace root; created if absent
  'user.component.ts',
  `import { Component } from '@angular/core';\n\n@Component({ selector: 'app-user' })\nexport class UserComponent {}`,
  config,
);

// Behavior:
// - If path escapes workspace root (e.g. "../../etc") → shows error, returns early
// - If file already exists → offers "Open File" button instead of overwriting
// - On success → opens file in editor and shows "File created successfully: /abs/path/user.component.ts"
// - On cancellation → silently aborts
// - Calls clearCache() after creation to invalidate sidebar file lists
```
```

--------------------------------

### resolvePlaceholders

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Scans a template string for placeholders like {{ComponentName}}, {{entityName}}, and {{style}}, prompts the user interactively for each, and returns the fully substituted string. It throws an error if the user cancels any input.

```APIDOC
## `resolvePlaceholders(rawString, defaultStyle)` — Template placeholder resolution

Scans a template string for `{{ComponentName}}`, `{{entityName}}`, and `{{style}}` tokens, prompts the user interactively for each, and returns the fully substituted string. Throws `'cancelled'` if the user dismisses any input box.

```typescript
import { resolvePlaceholders } from './src/app/helpers/placeholder.helper';

// Template string with placeholders
const template = `
  selector: 'app-{{entityName}}',
  styleUrls: ['./{{entityName}}.component.{{style}}'],
  export class {{ComponentName}}Component {}
`;

// Calling resolvePlaceholders prompts:
//   1. "Enter the class name" → user types "UserDashboard"
//   2. "Enter the entity name" → user types "user-dashboard"
//   3. style → uses defaultStyle "scss" automatically (no prompt)

const resolved = await resolvePlaceholders(template, 'scss');

// resolved ==
// "  selector: 'app-user-dashboard',\n
//    styleUrls: ['./user-dashboard.component.scss'],\n
//    export class UserDashboardComponent {}"
```
```

--------------------------------

### Angular 20+ Naming Conventions

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Configure the extension for modern Angular naming conventions, omitting redundant suffixes and using dash separators. Supports standalone components if configured.

```json
"angular.fileGenerator.omitSuffix": true
```

```json
"angular.fileGenerator.typeSeparator": "-"
```

--------------------------------

### Create New Git Branch

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this command to create a new branch for your feature development. Ensure you are in the project's root directory.

```bash
git checkout -b feature/your-feature
```

--------------------------------

### Angular TypeScript Snippets

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Use these TypeScript snippets to quickly generate common Angular constructs. Type the prefix and press Tab. Ensure necessary imports are present.

```typescript
import { signal } from '@angular/core';
const mySignal = signal(initialValue);
```

```typescript
import { computed } from '@angular/core';
const myComputed = computed(() => {
  return expression;
});
```

```typescript
import { effect } from '@angular/core';
effect(() => {
  // reactive logic
});
```

```typescript
import { linkedSignal } from '@angular/core';
const myLinkedSignal = linkedSignal(sourceSignal, (value) => {
  return transformation;
});
```

```typescript
import { toSignal } from '@angular/core/rxjs-interop';
const signalFromObservable = toSignal(myObservable, {
  initialValue: initialValue
});
```

```typescript
import { resource } from '@angular/core';
const myResource = resource(() => {
  return fetch('/api/data').then(res => res.json());
});
```

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
@NgModule({ declarations: [], imports: [CommonModule], providers: [], bootstrap: [] })
export class MyModule {}
```

```typescript
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class MyService { constructor() {} }
```

```typescript
export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080/api/v1',
};
```

--------------------------------

### Angular Resource Creation

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Create a resource, which is a signal that can be used to fetch data.

```typescript
const myResource = resource(() => ...)
```

--------------------------------

### Generate Angular Component via CLI

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Runs `ng g c` via the integrated terminal, allowing interactive option selection for component generation.

```bash
// Triggered via: Right-click folder → Angular File Generator → Generate Component with CLI
// Command ID: angular.terminal.component

// User inputs: path = "features/dashboard", options = [Standalone, OnPush change detection]
// Resulting command sent to terminal:
ng g c features/dashboard --style scss --standalone true --change-detection OnPush

// User inputs: path = "shared/header", options = [Inline Template, Skip Tests]
// Resulting command:
ng g c shared/header --style scss --standalone false --inline-template --skip-tests
```

--------------------------------

### Angular OnInit Interface

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Implement the OnInit interface to define initialization logic for an Angular component or directive.

```typescript
ngOnInit {}
```

--------------------------------

### Generate Angular Library

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Creates a new Angular library using `ng g lib` with options for publishable, standalone, prefix, and skip-install. Use for creating reusable library modules.

```typescript
// Command ID: angular.terminal.library

// User inputs: name="ui-kit", options=[Standalone, Publishable]
// Resulting command:
ng g lib ui-kit --standalone true --publishable
```

--------------------------------

### Configure VSCode Angular Generator Settings

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Add these options to your `.vscode/settings.json` to customize the Angular extension's behavior, including enabling the extension, setting standalone components as default, configuring file generation, and defining filters.

```jsonc
{
  // 1. Enable/Disable the extension
  "angular.enable": true,

  // 2. Standalone components by default
  "angular.components.standalone": true,
  "angular.components.style": "scss",    // 'css', 'less', 'sass', 'styl'

  // 3. Naming mode (Legacy vs. Angular 20+)
  "angular.fileGenerator.omitSuffix": true,   // true for Angular 20+ (omit .component.ts, .service.ts, etc.)
  "angular.fileGenerator.typeSeparator": "-",  // '-' for dash-separated; '.' for legacy
  "angular.fileGenerator.skipFolderConfirmation": false, // true to skip folder-confirmation dialogs

  // 4. Filters for "List Files"
  "angular.files.include": ["ts"],
  "angular.files.exclude": [
    "**/node_modules/**",
    "**/dist/**",
    "**/.*/**"
  ],
  "angular.files.watch": ["modules", "components", "services"], // folders to scan
  "angular.files.showPath": true, // show full path in list

  // 5. Working directory for CLI commands (monorepo)
  "angular.terminal.cwd": "packages/my-angular-app", // adjust to your structure
  "angular.fileGenerator.useRootWorkspace": false, // Use the root workspace folder as the current working directory to resolve relative paths

  // 6. Custom CLI commands
  "angular.submenu.customCommands": [
    {
      "name": "Feature Module (OnPush + Routing)",
      "command": "ng g m",
      "args": "--routing --flat --change-detection OnPush"
    }
  ],

  // 7. Custom templates
  "angular.submenu.templates": [
    {
      "name": "Corporate Component",
      "description": "Component with header + basic logging",
      "type": "component",
      "template": [
        "/* Company XYZ - Confidential */",
        "import { Component } from '@angular/core';",
        "import { LoggingService } from 'src/app/shared/logging.service';",
        "@Component({",
        "  selector: 'app-{{entityName}}',",
        "  standalone: true,",
        "  imports: [CommonModule],",
        "  templateUrl: './{{entityName}}.component.html',",
        "  styleUrls: ['./{{entityName}}.component.{{style}}'],",
        "})",
        "export class {{ComponentName}}Component {",
        "  constructor(private logger: LoggingService) {",
        "    this.logger.log('{{ComponentName}} initialized');",
        "  }",
        "}"
      ]
    }
  ]
}
```

--------------------------------

### Angular Template For Loop

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Iterate over a collection and render content for each item in an Angular template.

```html
@for (condition) {}
```

--------------------------------

### Resolve Template Placeholders with User Input

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Scans a template string for placeholders like {{ComponentName}} and {{entityName}}, prompting the user for input. Throws 'cancelled' if any input is dismissed. The defaultStyle parameter is used if no user input is provided for style.

```typescript
import { resolvePlaceholders } from './src/app/helpers/placeholder.helper';

// Template string with placeholders
const template = `
  selector: 'app-{{entityName}}',
  styleUrls: ['./{{entityName}}.component.{{style}}'],
  export class {{ComponentName}}Component {}
`;

// Calling resolvePlaceholders prompts:
//   1. "Enter the class name" → user types "UserDashboard"
//   2. "Enter the entity name" → user types "user-dashboard"
//   3. style → uses defaultStyle "scss" automatically (no prompt)

const resolved = await resolvePlaceholders(template, 'scss');

// resolved ==
// "  selector: 'app-user-dashboard',
//    styleUrls: ['./user-dashboard.component.scss'],
//    export class UserDashboardComponent {}"

```

--------------------------------

### Scaffold New Angular Application

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a new Angular application using `ng n <name>` with interactive options for routing, SSR, standalone components, and styling. Use for bootstrapping new projects.

```typescript
// Command ID: angular.terminal.new
// Triggered via: Right-click workspace root → Angular File Generator → New Application

// User inputs: name="my-app", options=[Routing, Standalone, SSR]
// Resulting command:
ng n my-app --style scss --standalone true --routing --ssr

// User inputs: name="admin-portal", options=[Skip Git, Skip Tests, Inline Style]
// Resulting command:
ng n admin-portal --style scss --standalone false --skip-git --skip-tests --inline-style
```

--------------------------------

### Save File Safely to Workspace

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Writes a generated file to the workspace, handling directory creation, preventing path traversal, detecting duplicates, and providing cancellation and progress notifications. It also clears the cache after creation.

```typescript
import { saveFile } from './src/app/helpers/save-file.helper';

// Called internally by all FileController generators
await saveFile(
  'src/app/features/user',   // relative to workspace root; created if absent
  'user.component.ts',
  `import { Component } from '@angular/core';\n\n@Component({ selector: 'app-user' })\nexport class UserComponent {}`,
  config,
);

// Behavior:
// - If path escapes workspace root (e.g. "../../etc") → shows error, returns early
// - If file already exists → offers "Open File" button instead of overwriting
// - On success → opens file in editor and shows "File created successfully: /abs/path/user.component.ts"
// - On cancellation → silently aborts
// - Calls clearCache() after creation to invalidate sidebar file lists

```

--------------------------------

### Angular Signal Creation

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Create a new signal with an initial value.

```typescript
const mySignal = signal(...)
```

--------------------------------

### Execute Custom Angular CLI Command

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Runs a user-defined command from `angular.submenu.customCommands` with placeholder resolution. Useful for automating specific CLI tasks.

```json
// .vscode/settings.json
"angular.submenu.customCommands": [
  {
    "name": "Smart Component",
    "command": "ng g c",
    "args": "{{entityName}} --style {{style}} --standalone true --change-detection OnPush --export"
  }
]

// User selects "Smart Component", inputs: entityName="user-list", style="scss"
// Resulting terminal command:
ng g c user-list --style scss --standalone true --change-detection OnPush --export
```

--------------------------------

### Angular Template Loading Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define content to display while deferred content is loading in an Angular template.

```html
@loading {}
```

--------------------------------

### Angular Effect Snippet

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

TypeScript snippet for setting up an effect in Angular to run reactive logic. Requires importing the `effect` function from '@angular/core'.

```typescript
import { effect } from '@angular/core';
effect(() => {
  // reactive logic
});
```

--------------------------------

### Enable File Naming Without Suffixes

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Set 'angular.fileGenerator.omitSuffix' to true in settings.json to generate files without .component.ts or .service.ts suffixes, aligning with Angular 20+ conventions.

```jsonc
{
  "angular.fileGenerator.omitSuffix": true
}
```

--------------------------------

### Generate File from Custom Template

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a file using a user-defined template from `angular.submenu.templates`. Placeholders are resolved interactively at generation time.

```json
// .vscode/settings.json
"angular.submenu.templates": [
  {
    "name": "Feature Component",
    "description": "Component with OnPush and inject pattern",
    "type": "component",
    "template": [
      "import { Component, ChangeDetectionStrategy, inject } from '@angular/core';",
      "import { CommonModule } from '@angular/common';",
      "",
      "@Component({",
      "  selector: 'app-{{entityName}}',",
      "  standalone: true,",
      "  imports: [CommonModule],",
      "  templateUrl: './{{entityName}}.component.html',",
      "  styleUrls: ['./{{entityName}}.component.{{style}}'],",
      "  changeDetection: ChangeDetectionStrategy.OnPush"
      "})",
      "export class {{ComponentName}}Component {}"
    ]
  }
]
```

```typescript
// Result after prompts (ComponentName="UserProfile", entityName="user-profile", style="scss"):
// Output filename: user-profile.component.ts
import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserProfileComponent {}
```

--------------------------------

### Angular Resource Snippet

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

TypeScript snippet for creating an Angular resource, typically used for fetching data. Requires importing `resource` from '@angular/core'.

```typescript
import { resource } from '@angular/core';
const myResource = resource(() => fetch('/api/data').then(r => r.json()));
```

--------------------------------

### Angular Unsubscribe Pattern

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Initialize an array to hold subscriptions for managing unsubscribing in Angular components.

```typescript
private unsubscribe: Subscription[] = []
```

--------------------------------

### Legacy Naming Conventions (Angular 9-19)

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Configure the extension to use traditional Angular naming conventions, including component suffixes. Suitable for projects maintaining older naming standards.

```json
"angular.fileGenerator.omitSuffix": false
```

```json
"angular.fileGenerator.typeSeparator": "."
```

--------------------------------

### Angular HTML Snippets

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

These HTML snippets facilitate the creation of Angular template structures. Type the prefix and press Tab. They are useful for common directives and routing.

```html
@if ($value$ | async; as value) {
  <!-- content -->
}
```

```html
@for (item of items; track item._id) {
  <!-- content -->
}
```

```html
@switch (condition) {
  @case (value1) { <!-- branch 1 --> }
  @default { <!-- fallback --> }
}
```

```html
@defer (on viewport) {
  <heavy-component />
} @placeholder { <p>Loading...</p> } @loading { <spinner /> }
```

```html
<router-outlet></router-outlet>
```

```html
<a routerLink="/dashboard">Dashboard</a>
```

--------------------------------

### Angular Template If Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Conditionally render content in an Angular template based on a boolean expression.

```html
@if (condition) {}
```

--------------------------------

### Generate TypeScript Interface

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a TypeScript interface, prompting for a class name and an interface type. These are appended to both the interface name and filename.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Interface
// Command ID: angular.file.interface
// Inputs: name = "User", type = "model"
// Output filename: user.model.ts

export interface UserModel {}
```

--------------------------------

### Angular Template Placeholder Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define a placeholder for deferred content in an Angular template.

```html
@placeholder {}
```

--------------------------------

### Angular Signal Snippet

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

TypeScript snippet for quickly generating an Angular signal. Requires importing the `signal` function from '@angular/core'.

```typescript
import { signal } from '@angular/core';
const mySignal = signal(initialValue);
```

--------------------------------

### Angular Subscribe and Unsubscribe

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Subscribe to an observable and push the subscription to the unsubscribe array for later cleanup.

```typescript
this.unsubscribe.push(this.subscr);
```

--------------------------------

### Generate Angular Route Guard File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a functional Angular route guard. Prompts for the guard type (CanActivate, CanActivateChild, CanDeactivate, CanMatch) and sets parameters automatically. Filename uses the 'typeSeparator' setting.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Guard
// Command ID: angular.file.guard
// Prompts: guard name (camelCase), guard type (CanActivate | CanActivateChild | CanDeactivate | CanMatch)

// Generated file for "auth" guard, type CanActivate, typeSeparator=".":
// Filename: auth.guard.ts
import { CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  return true;
};
```

```typescript
// Generated file for "auth" guard, type CanMatch, typeSeparator="-":
// Filename: auth-guard.ts
import { CanMatchFn } from '@angular/router';

export const authGuard: CanMatchFn = (route, segments) => {
  return true;
};
```

--------------------------------

### Run Angular Tests

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Executes unit tests with `ng t` or end-to-end tests with `ng e` in the configured terminal. Use for verifying application functionality.

```typescript
// Command IDs: angular.terminal.test / angular.terminal.e2e

// Unit tests:
ng t

// End-to-end tests:
ng e
```

--------------------------------

### Angular Class Service Boilerplate

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this snippet to generate a basic Angular Service class definition.

```typescript
export class Service {}
```

--------------------------------

### Angular Template If-Else If Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Conditionally render content in an Angular template, allowing for multiple conditions.

```html
@if (condition) {} @else if (condition) {}
```

--------------------------------

### Restore Old File Suffixes in angular.json

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

To revert to the older .component.ts / .service.ts file naming convention, configure the schematics in your angular.json file.

```jsonc
{
  "projects": {
    "your-app": {
      "schematics": {
        "@schematics/angular:component": { "type": "component" },
        "@schematics/angular:directive": { "type": "directive" },
        "@schematics/angular:service": { "type": "service" },
        "@schematics/angular:guard": { "typeSeparator": "." },
        "@schematics/angular:interceptor": { "typeSeparator": "." },
        "@schematics/angular:module": { "typeSeparator": "." },
        "@schematics/angular:pipe": { "typeSeparator": "." },
        "@schematics/angular:resolver": { "typeSeparator": "." }
      }
    }
  }
}
```

--------------------------------

### Angular ToSignal Snippet

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

TypeScript snippet for converting an RxJS Observable to an Angular signal. Requires importing `toSignal` from '@angular/core/rxjs-interop'.

```typescript
import { toSignal } from '@angular/core/rxjs-interop';
const signalFromObs = toSignal(myObservable, { initialValue: defaultValue });
```

--------------------------------

### VS Code Settings for Angular File Generator

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

This JSON configuration object shows the full reference for the Angular File Generator extension settings in VS Code. It covers defaults for components, sidebar file lists, terminal behavior, file generation options, submenu visibility, custom CLI commands, and custom file templates.

```json
{
  "angular.enable": true,

  // Component defaults
  "angular.components.standalone": true,
  "angular.components.style": "scss",       // "css" | "scss" | "sass" | "less" | "none"

  // Sidebar file list
  "angular.files.include": ["ts"],
  "angular.files.exclude": ["**/node_modules/**", "**/dist/**", "**/out/**"],
  "angular.files.watch": ["modules", "components", "services"],
  "angular.files.showPath": true,

  // Terminal / CLI working directory (monorepo support)
  "angular.terminal.cwd": "packages/my-app",

  // File generator behavior
  "angular.fileGenerator.omitSuffix": true,       // Angular 20+ mode: user.ts instead of user.component.ts
  "angular.fileGenerator.typeSeparator": "-",      // "-" or "."
  "angular.fileGenerator.skipFolderConfirmation": false,
  "angular.fileGenerator.useRootWorkspace": false,

  // Submenu visibility
  "angular.submenu.activateItem": {
    "terminal": { "component": true, "guard": true, "pipe": true, "service": true, "custom": true },
    "file": { "class": true, "component": true, "directive": true, "enum": true,
              "guard": true, "interceptor": true, "interface": true, "module": true,
              "pipe": true, "resolver": true, "service": true, "spec": true, "template": true }
  },

  // Custom CLI commands (supports {{ComponentName}}, {{entityName}}, {{style}} placeholders)
  "angular.submenu.customCommands": [
    {
      "name": "OnPush Component",
      "command": "ng g c",
      "args": "{{entityName}} --style {{style}} --standalone true --change-detection OnPush"
    }
  ],

  // Custom file templates
  "angular.submenu.templates": [
    {
      "name": "Corporate Component",
      "description": "Component with logging",
      "type": "component",
      "template": [
        "import { Component } from '@angular/core';",
        "import { CommonModule } from '@angular/common';",
        "@Component({ selector: 'app-{{entityName}}', standalone: true, imports: [CommonModule],",
        "  templateUrl: './{{entityName}}.component.html',",
        "  styleUrls: ['./{{entityName}}.component.{{style}}'] })",
        "export class {{ComponentName}}Component {}"
      ]
    }
  ]
}

```

--------------------------------

### Manage Angular Analytics and Cache

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Provides commands to manage `ng analytics` and `ng cache` sub-commands directly from VS Code. Use for toggling, inspecting, or clearing analytics and cache settings.

```typescript
// Command IDs and their CLI equivalents:
// angular.terminal.analytics.disable  → ng analytics disable
// angular.terminal.analytics.enable   → ng analytics enable
// angular.terminal.analytics.info     → ng analytics info
// angular.terminal.analytics.prompt   → ng analytics prompt
// angular.terminal.cache.clear        → ng cache clean
// angular.terminal.cache.disable      → ng cache disable
// angular.terminal.cache.enable       → ng cache enable
// angular.terminal.cache.info         → ng cache info
// angular.terminal.version            → ng v
// angular.terminal.environments       → ng g environments
```

--------------------------------

### Angular Template If-Else Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Conditionally render content in an Angular template, providing an alternative block if the condition is false.

```html
@if (condition) {} @else {}
```

--------------------------------

### Generate Angular Pipe File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates an Angular PipeTransform pipe class. The filename uses the 'typeSeparator' setting.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Pipe
// Command ID: angular.file.pipe
// Input: class name (PascalCase, e.g. "CurrencyFormat")
// Output filename: currency-format.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'currency-format',
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}
```

--------------------------------

### Generate Angular Service File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates an @Injectable Angular service. The filename can be configured to omit the '.service.ts' suffix for Angular 20+ compatibility.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Service
// Command ID: angular.file.service

// Generated file content (omitSuffix=false):
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {}
```

```typescript
// Generated file content (omitSuffix=true):
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class User {}
```

--------------------------------

### Angular Constant Environment Definition

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this snippet to define the environment configuration object for an Angular application.

```typescript
export const environment = {}
```

--------------------------------

### Generate Angular Resolver File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a class-based Resolve<boolean> resolver. The filename uses the 'typeSeparator' setting.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Resolver
// Command ID: angular.file.resolver
// Input: class name (PascalCase, e.g. "User")
// Output filename: user.resolver.ts

import { Injectable } from '@angular/core';
import {
  Router,
  Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot,
} from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UserResolver implements Resolve<boolean> {
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return of(true);
  }
}
```

--------------------------------

### Generate Angular HTTP Interceptor File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a class-based HttpInterceptor. The filename respects the 'typeSeparator' setting.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Interceptor
// Command ID: angular.file.interceptor
// Input: class name (PascalCase, e.g. "Auth")
// Output filename (typeSeparator="."):
// auth.interceptor.ts

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}
```

--------------------------------

### Angular OnDestroy Interface for Reactivity

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Implement the OnDestroy interface for managing cleanup in reactive Angular components.

```typescript
implements OnDestroy {}
```

--------------------------------

### Generate Generic TypeScript Class

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates a generic TypeScript class, prompting for a class name and a type suffix (e.g., 'dto', 'entity', 'model'). The suffix is appended to both the class name and filename.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Class
// Command ID: angular.file.class
// Inputs: class name = "User", type = "dto"
// Output filename: user.dto.ts

export class UserDto {}

// Inputs: class name = "Product", type = "entity"
// Output filename: product.entity.ts
export class ProductEntity {}
```

--------------------------------

### Angular Class Component Boilerplate

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this snippet to generate a basic Angular Component class definition.

```typescript
export class Component {}
```

--------------------------------

### Angular Template Empty Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define content to render in an Angular template when a collection is empty.

```html
@empty {}
```

--------------------------------

### Angular Class Module Boilerplate

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this snippet to generate a basic Angular Module class definition.

```typescript
export class Module {}
```

--------------------------------

### Angular Observable to Signal Conversion

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Convert an observable into a signal, automatically handling subscriptions and updates.

```typescript
const signalFromObservable = toSignal(...)
```

--------------------------------

### Angular Class Routing Module Boilerplate

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this snippet to generate a basic Angular Routing Module class definition.

```typescript
export class RoutingModule {}
```

--------------------------------

### Angular Template Defer Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Defer loading and rendering of a block of content in an Angular template until certain conditions are met.

```html
@defer (condition) {}
```

--------------------------------

### Angular Constant Routes Definition

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use this snippet to define an array of routes for an Angular application.

```typescript
export const routes: Routes = []
```

--------------------------------

### Angular Router Link Directive

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use the routerLink directive to create navigation links in an Angular template.

```html
<a routerLink=""></a>
```

--------------------------------

### Angular Template Switch Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Conditionally render content in an Angular template based on the value of an expression.

```html
@switch (condition) {}
```

--------------------------------

### Transform JSON to TypeScript Interfaces

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Converts selected JSON text in the editor to TypeScript `export interface` declarations. Useful for generating type definitions from JSON data.

```typescript
// Triggered via: Select JSON text → Right-click → Angular File Generator → Transform JSON to TS
// Command ID: angular.transform.json.ts

// Input (selected in editor):
{
  "user": {
    "id": 1,
    "name": "Alice",
    "roles": ["admin", "editor"],
    "address": {
      "city": "Madrid",
      "zip": "28001"
    }
  }
}

// Output (opens in new TypeScript editor tab):
export interface Address {
  city: string;
  zip: string;
}

export interface User {
  id: number;
  name: string;
  roles: string[];
  address: Address;
}

export interface RootObject {
  user: User;
}
```

--------------------------------

### Angular Effect Creation

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Create an effect that runs side effects in response to signal changes.

```typescript
effect(() => ...)
```

--------------------------------

### Generate Angular NgModule File

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates an Angular NgModule with CommonModule imported. The filename uses the 'typeSeparator' setting.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Module
// Command ID: angular.file.module
// Input: class name (PascalCase, e.g. "User")
// Output filename (typeSeparator="."):
// user.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [CommonModule],
})
export class UserModule {}
```

--------------------------------

### Generate Angular Directive

Source: https://context7.com/manuelgil/vscode-angular-generator/llms.txt

Generates an Angular @Directive class. The filename respects the `omitSuffix` setting.

```typescript
// Triggered via: Right-click folder → Angular File Generator → Generate Directive
// Command ID: angular.file.directive
// Input: class name (PascalCase, e.g. "Highlight")
// Output filename (omitSuffix=false): highlight.directive.ts

import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {}
```

--------------------------------

### Angular Template Case Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define a case within a switch block in an Angular template.

```html
@case (condition) {}
```

--------------------------------

### Angular Template Else If Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use an else if block within an Angular template to handle additional conditions.

```html
@else if (condition) {}
```

--------------------------------

### Angular Computed Signal Creation

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Create a computed signal that derives its value from other signals.

```typescript
const myComputed = computed(() => ...)
```

--------------------------------

### Angular Template Default Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Define the default case within a switch block in an Angular template.

```html
@default {}
```

--------------------------------

### Angular LinkedSignal Snippet

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

TypeScript snippet for creating a linked signal, which transforms values from a source signal. Requires importing `linkedSignal` from '@angular/core'.

```typescript
import { linkedSignal } from '@angular/core';
const myLinkedSignal = linkedSignal(sourceSignal, (v) => transformation);
```

--------------------------------

### Angular Template Else Block

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use an else block within an Angular template to render content when no preceding conditions are met.

```html
@else {}
```

--------------------------------

### Angular Linked Signal Creation

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Create a linked signal, which is a signal that can be written to and read from.

```typescript
const myLinkedSignal = linkedSignal(...)
```

--------------------------------

### Angular Computed Snippet

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

TypeScript snippet for creating a computed signal in Angular. Requires importing the `computed` function from '@angular/core'.

```typescript
import { computed } from '@angular/core';
const myComputed = computed(() => expression);
```

--------------------------------

### Angular Router Outlet Directive

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Use the router-outlet directive to indicate where a routed component should be displayed in an Angular template.

```html
<router-outlet></router-outlet>
```

--------------------------------

### Angular OnDestroy Interface

Source: https://github.com/manuelgil/vscode-angular-generator/blob/main/README.md

Implement the OnDestroy interface to define cleanup logic for an Angular component or directive.

```typescript
ngOnDestroy {}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.