${2:content}
`,\",\n \"})\",\n \"export class ${3:Name}Component {}\"\n ],\n \"description\": \"A component with an inline template\"\n },\n \"Service\": {\n \"prefix\": \"ngs\",\n \"body\": [\n \"import { Injectable } from '@angular/core';\",\n \"\",\n \"@Injectable({ providedIn: 'root' })\",\n \"export class ${1:Name}Service {\",\n \" $0\",\n \"}\"\n ],\n \"description\": \"An injectable service\"\n },\n \"Inject\": {\n \"prefix\": \"nginj\",\n \"body\": [\n \"private readonly ${1:service} = inject(${2:Service});\"\n ],\n \"description\": \"inject()\"\n },\n \"Signal\": {\n \"prefix\": \"ngsig\",\n \"body\": [\n \"readonly ${1:count} = signal(${2:0});\"\n ],\n \"description\": \"A signal\"\n },\n \"Computed\": {\n \"prefix\": \"ngcomp\",\n \"body\": [\n \"readonly ${1:double} = computed(() => this.${2:count}() * 2);\"\n ],\n \"description\": \"A computed signal\"\n },\n \"Effect\": {\n \"prefix\": \"ngeff\",\n \"body\": [\n \"effect(() => {\",\n \" $0\",\n \"});\"\n ],\n \"description\": \"An effect\"\n },\n \"Input\": {\n \"prefix\": \"ngin\",\n \"body\": [\n \"${1:name} = input<${2:string}>(${3:''});\"\n ],\n \"description\": \"A signal input\"\n },\n \"Output\": {\n \"prefix\": \"ngout\",\n \"body\": [\n \"${1:changed} = output<${2:string}>();\"\n ],\n \"description\": \"An output\"\n },\n \"HTTP get\": {\n \"prefix\": \"nghttp\",\n \"body\": [\n \"this.http.get<${1:Item[]}>(`${2:/api/items}`).subscribe((${3:items}) => {\",\n \" $0\",\n \"});\"\n ],\n \"description\": \"An HTTP GET\"\n },\n \"Routes\": {\n \"prefix\": \"ngroutes\",\n \"body\": [\n \"export const routes: Routes = [\",\n \" { path: '${1:home}', component: ${2:HomeComponent} },\",\n \" { path: '**', redirectTo: '${1:home}' },\",\n \"];\"\n ],\n \"description\": \"A routes array\"\n },\n \"Route guard\": {\n \"prefix\": \"nguard\",\n \"body\": [\n \"export const ${1:auth}Guard: CanActivateFn = (route, state) => {\",\n \" $0\",\n \" return true;\",\n \"};\"\n ],\n \"description\": \"A functional guard\"\n },\n \"Reactive form\": {\n \"prefix\": \"ngform\",\n \"body\": [\n \"readonly form = new FormGroup({\",\n \" ${1:name}: new FormControl('', { nonNullable: true, validators: [Validators.required] }),\",\n \"});\"\n ],\n \"description\": \"A reactive form group\"\n },\n \"Pipe\": {\n \"prefix\": \"ngpipe\",\n \"body\": [\n \"@Pipe({ name: '${1:name}', standalone: true })\",\n \"export class ${2:Name}Pipe implements PipeTransform {\",\n \" transform(value: ${3:string}): ${3:string} {\",\n \" return $0;\",\n \" }\",\n \"}\"\n ],\n \"description\": \"A pipe\"\n }\n}\n"},"snippets/html-xml.json":{"encoding":"utf8","content":"{\n \"ngIf block\": {\n \"prefix\": \"ngif\",\n \"body\": [\n \"@if (${1:condition}) {\",\n \" $0\",\n \"} @else {\",\n \" \",\n \"}\"\n ],\n \"description\": \"@if block\"\n },\n \"ngFor block\": {\n \"prefix\": \"ngfor\",\n \"body\": [\n \"@for (${1:item} of ${2:items}; track ${1:item}.${3:id}) {\",\n \" $0\",\n \"} @empty {\",\n \"Nothing here
\",\n \"}\"\n ],\n \"description\": \"@for block\"\n },\n \"Switch block\": {\n \"prefix\": \"ngswitch\",\n \"body\": [\n \"@switch (${1:value}) {\",\n \" @case (${2:1}) { $0 }\",\n \" @default { }\",\n \"}\"\n ],\n \"description\": \"@switch block\"\n },\n \"Defer block\": {\n \"prefix\": \"ngdefer\",\n \"body\": [\n \"@defer (on viewport) {\",\n \" <${1:app-heavy} />\",\n \"} @placeholder {\",\n \"Loading
\",\n \"}\"\n ],\n \"description\": \"@defer block\"\n },\n \"Two-way binding\": {\n \"prefix\": \"ngmodel\",\n \"body\": [\n \"\"\n ],\n \"description\": \"ngModel\"\n },\n \"Event binding\": {\n \"prefix\": \"ngclick\",\n \"body\": [\n \"(click)=\\\"${1:onClick}(\\\\$event)\\\"\"\n ],\n \"description\": \"A click handler\"\n },\n \"Router link\": {\n \"prefix\": \"ngrl\",\n \"body\": [\n \"${2:Label}\"\n ],\n \"description\": \"A routerLink\"\n },\n \"Form field\": {\n \"prefix\": \"ngfield\",\n \"body\": [\n \"\",\n \"@if (form.controls.${1:name}.invalid && form.controls.${1:name}.touched) {\",\n \" Required\",\n \"}\"\n ],\n \"description\": \"A reactive form field\"\n }\n}\n"},"README.md":{"encoding":"utf8","content":"# Angular Snippets\n\nComponents, services, modules, signals, routing and forms for Angular.\n\nType a prefix and press Tab. 22 snippets.\n\n| Language | Prefix | What it inserts |\n| --- | --- | --- |\n| TypeScript | `ngc` | A standalone component |\n| TypeScript | `ngci` | A component with an inline template |\n| TypeScript | `ngs` | An injectable service |\n| TypeScript | `nginj` | inject() |\n| TypeScript | `ngsig` | A signal |\n| TypeScript | `ngcomp` | A computed signal |\n| TypeScript | `ngeff` | An effect |\n| TypeScript | `ngin` | A signal input |\n| TypeScript | `ngout` | An output |\n| TypeScript | `nghttp` | An HTTP GET |\n| TypeScript | `ngroutes` | A routes array |\n| TypeScript | `nguard` | A functional guard |\n| TypeScript | `ngform` | A reactive form group |\n| TypeScript | `ngpipe` | A pipe |\n| HTML / XML | `ngif` | @if block |\n| HTML / XML | `ngfor` | @for block |\n| HTML / XML | `ngswitch` | @switch block |\n| HTML / XML | `ngdefer` | @defer block |\n| HTML / XML | `ngmodel` | ngModel |\n| HTML / XML | `ngclick` | A click handler |\n| HTML / XML | `ngrl` | A routerLink |\n| HTML / XML | `ngfield` | A reactive form field |\n\nThis extension runs no code and asks for no permissions.\n"}}}