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}",
"}",
],
},
}