Angular code snippets for vscode

angular.code-snippets.md

Angular snippets

Create a file angular.code-snippets under .vscode/

touch ./vscode/angular.code-snippets

Add below content in it:

{
  "Angular standalone component: Inline template": {
    "prefix": "asc-it",
    "body": [
      "import {ChangeDetectionStrategy, Component} from \"@angular/core\";",
      "",
      "@Component({",
      "\tselector: \"app-${1:${selector_name}}\",",
      "\tstandalone: true,",
      "\timports: [],",
      "\tchangeDetection: ChangeDetectionStrategy.OnPush,",
      "\tstyles: ``,",
      "\ttemplate: ``",
      "})",
      "export class ${2:${ComponentName}}Component {",
      "",
      "}",
    ],
  },
  "Angular standalone component: Separate template": {
    "prefix": "asc-st",
    "body": [
      "import {ChangeDetectionStrategy, Component} from \"@angular/core\";",
      "",
      "@Component({",
      "\tselector: \"app-${1:${selector_name}}\",",
      "\tstandalone: true,",
      "\timports: [],",
      "\tchangeDetection: ChangeDetectionStrategy.OnPush,",
      "\ttemplateUrl: \"./${2:${template_name}}.component.html\",",
      "\tstyles: ``",
      "})",
      "export class ${2:${ComponentName}}Component {",
      "",
      "}",
    ],
  },
  "Angular standalone svg icon component: Inline template": {
    "prefix": "asc-it-icon",
    "body": [
      "import { cn } from \"@/src/lib/utils\";",
      "import {ChangeDetectionStrategy, Component, Input, OnInit} from \"@angular/core\";",
      "",
      "@Component({",
      "\tselector: \"icon-${1:${selector_name}}\",",
      "\tstandalone: true,",
      "\timports: [],",
      "\tchangeDetection: ChangeDetectionStrategy.OnPush,",
      "\tstyles: ``,",
      "\ttemplate: `<svg",
      "\t\t[class]=\"cssClasses\"",
      "\t>",
      "\t</svg>`",
      "})",
      "export class ${2:${ComponentName}}Icon implements OnInit {",
      "\t@Input({ required: false }) className: string = \"\";",
      "",
      "\tprotected cssClasses: string = \"\";",
      "",
      "\tngOnInit(): void {",
      "\t\tthis.cssClasses = cn(\"h-4 w-4 fill-current\", this.className);",
      "\t}",
      "}",
    ],
  },
}