Angular 8 HTML snippets

html.json

{
	"Uppercase pipe": {
		"prefix": "ng-pipe-uppercase",
		"description": "Uppercase pipe",
		"body": [
			"{{ ${variable} | uppercase }}$0"
		]
	},
	"Lowercase pipe": {
		"prefix": "ng-pipe-lowercase",
		"description": "Lowercase pipe",
		"body": [
			"{{ ${variable} | lowercase }}$0"
		]
	},
	"v4: Titlecase pipe": {
		"prefix": "ng-pipe-titlecase",
		"description": "v4: Titlecase pipe",
		"body": [
			"{{ ${variable} | titlecase }}$0"
		]
	},
	"Date pipe - Default format: 09/15/1971": {
		"prefix": "ng-pipe-date",
		"description": "Date pipe - Default format: 09/15/1971",
		"body": [
			"{{ ${variable} | date }}$0"
		]
	},
	"Date pipe - Format: \"MM/dd/yy\" = 09/15/71": {
		"prefix": "ng-pipe-date-custom",
		"description": "Date pipe - Format: \"MM/dd/yy\" = 09/15/71",
		"body": [
			"{{ ${variable} | date:\"MM/dd/yy\" }}$0"
		]
	},
	"Short date pipe - Format: 09/15/1971": {
		"prefix": "ng-pipe-date-short",
		"description": "Short date pipe - Format: 09/15/1971",
		"body": [
			"{{ ${variable} | date:shortDate }}$0"
		]
	},
	"Full date pipe - Format: Wednesday, September 15, 1971": {
		"prefix": "ng-pipe-date-full",
		"description": "Full date pipe - Format: Wednesday, September 15, 1971",
		"body": [
			"{{ ${variable} | date:fullDate }}$0"
		]
	},
	"Percent pipe - Usage: number_expression | percent[:digitInfo]": {
		"prefix": "ng-pipe-percent",
		"description": "Percent pipe - Usage: number_expression | percent[:digitInfo]",
		"body": [
			"{{ ${variable} | percent:${digitInfo} }}$0"
		]
	},
	"Decimal pipe - Usage: number_expression | decimal[:digitInfo]": {
		"prefix": "ng-pipe-decimal",
		"description": "Decimal pipe - Usage: number_expression | decimal[:digitInfo]",
		"body": [
			"{{ ${variable} | decimal:${digitInfo} }}$0"
		]
	},
	"Slice pipe - Usage: array_or_string_expression | slice:start[:end]": {
		"prefix": "ng-pipe-slice",
		"description": "Slice pipe - Usage: array_or_string_expression | slice:start[:end]",
		"body": [
			"{{ ${variable} | slice:${start}:${end} }}$0"
		]
	},
	"Currency pipe - Usage: money | currency:'EUR'": {
		"prefix": "ng-pipe-currency",
		"description": "Currency pipe - Usage: money | currency:'EUR'",
		"body": [
			"{{ ${variable} | currency:'${CURRENCY}' }}$0"
		]
	},
	"Json pipe - Usage: object | json": {
		"prefix": "ng-pipe-json",
		"description": "Json pipe - Usage: object | json",
		"body": [
			"{{ ${object} | json }}$0"
		]
	},
	"Async pipe - Usage: observable_or_promise_expression | async": {
		"prefix": "ng-pipe-async",
		"description": "Async pipe - Usage: observable_or_promise_expression | async",
		"body": [
			"{{ ${observable} | async }}$0"
		]
	},
	"Router link": {
		"prefix": "ng-router-attribute",
		"description": "Router link",
		"body": [
			"[routerLink]=\"[ '/${path}', ${routeParam} ]\"$0"
		]
	},
	"Router active link": {
		"prefix": "ng-router-linkActive",
		"description": "Router active link",
		"body": [
			"<a [routerLink]=\"[ '/${path}' ]\" routerLinkActive=\"active\">${name}</a>$0"
		]
	},
	"Router outlet element": {
		"prefix": "ng-router-outlet",
		"description": "Router outlet element",
		"body": [
			"<router-outlet></router-outlet>",
			"$0"
		]
	},
	"Router outlet element with name": {
		"prefix": "ng-router-outlet-name",
		"description": "Router outlet element with name",
		"body": [
			"<router-outlet name=\"${name}\"></router-outlet>",
			"$0"
		]
	},
	"CanActivate Guard Route": {
		"prefix": "ng-route-guard-canactivate",
		"description": "CanActivate Guard Route",
		"body": [
			"import { Injectable } from '@angular/core';",
			"import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';",
			"import { Observable } from 'rxjs';",
			"",
			"@Injectable()",
			"export class ${CanActivate}Guard implements CanActivate {",
			"\tcanActivate(",
			"\t\troute: ActivatedRouteSnapshot,",
			"\t\tstate: RouterStateSnapshot",
			"\t): Observable<boolean> | Promise<boolean> | boolean {",
			"\t\treturn true;$0",
			"\t}",
			"}",
			""
		]
	},
	"CanActivateChild Route": {
		"prefix": "ng-route-guard-canactivatechild",
		"description": "CanActivateChild Route",
		"body": [
			"import { Injectable } from '@angular/core';",
			"import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';",
			"import { Observable } from 'rxjs';",
			"",
			"@Injectable()",
			"export class ${CanActivateChild}Guard implements CanActivateChild {",
			"\tcanActivateChild(",
			"\t\troute: ActivatedRouteSnapshot,",
			"\t\tstate: RouterStateSnapshot",
			"\t): Observable<boolean> | Promise<boolean> | boolean {",
			"\t\treturn true;$0",
			"\t}",
			"}",
			""
		]
	},
	"Resolve Guard Route": {
		"prefix": "ng-route-guard-resolve",
		"description": "Resolve Guard Route",
		"body": [
			"import { Injectable } from '@angular/core';",
			"import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';",
			"import { Observable } from 'rxjs';",
			"",
			"@Injectable()",
			"export class ${Resolve}Guard implements Resolve<${T}> {",
			"\tresolve(",
			"\t\troute: ActivatedRouteSnapshot,",
			"\t\tstate: RouterStateSnapshot",
			"\t): Observable<any> | Promise<any> | any {",
			"\t\treturn true;$0",
			"\t}",
			"}",
			""
		]
	},
	"CanLoad Guard Route": {
		"prefix": "ng-route-guard-canload",
		"description": "CanLoad Guard Route",
		"body": [
			"import { Injectable } from '@angular/core';",
			"import { CanLoad, Route } from '@angular/router';",
			"import { Observable } from 'rxjs';",
			"",
			"@Injectable()",
			"export class ${CanLoad}Guard implements CanLoad {",
			"\tcanLoad(",
			"\t\t${route}: Route",
			"\t): Observable<boolean> | Promise<boolean> | boolean {",
			"\t\treturn true;$0",
			"\t}",
			"}",
			""
		]
	},
	"CanDeactivate Guard Route": {
		"prefix": "ng-route-guard-candeactivate",
		"description": "CanDeactivate Guard Route",
		"body": [
			"import { Injectable } from '@angular/core';",
			"import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';",
			"import { Observable } from 'rxjs';",
			"",
			"@Injectable()",
			"export class ${CanDeactivate}Guard implements CanDeactivate<${T}> {",
			"\tcanDeactivate(",
			"\t\tcomponent: ${T},",
			"\t\troute: ActivatedRouteSnapshot,",
			"\t\tstate: RouterStateSnapshot",
			"\t): Observable<boolean> | Promise<boolean> | boolean {",
			"\t\treturn true;$0",
			"\t}",
			"}"
		]
	},
	"Angular Container": {
		"prefix": "ng-container",
		"description": "Angular Container",
		"body": [
			"<ng-container>${1}</ng-container>",
			"$0"
		]
	},
	"Angular Container with *ngFor": {
		"prefix": "ng-container-ngfor",
		"description": "Angular Container with *ngFor",
		"body": [
			"<ng-container *ngFor=\"let ${1:item} of ${2:items}\">",
			"  ${3:content}",
			"</ng-container>",
			"$0"
		]
	},
	"Angular Container with *ngTemplateOutlet": {
		"prefix": "ng-container-template",
		"description": "Angular Container with *ngTemplateOutlet",
		"body": [
			"<ng-container *ngTemplateOutlet=\"${1}\"></ng-container>",
			"$0"
		]
	},
	"Angular Container with *ngContainerOutlet": {
		"prefix": "ng-container-component",
		"description": "Angular Container with *ngContainerOutlet",
		"body": [
			"<ng-container *ngComponentOutlet=\"${1}\"></ng-container>",
			"$0"
		]
	},
	"Angular template": {
		"prefix": "ng-template",
		"description": "Angular template",
		"body": [
			"<ng-template #${1:name}></ng-template>",
			"$0"
		]
	},
	"ngModel directive: [(ngModel)]=\"name\"": {
		"prefix": "ng-model",
		"description": "ngModel directive: [(ngModel)]=\"name\"",
		"body": [
			"[(ngModel)]=\"${name}\"$0"
		]
	},
	"If directive: *ngIf=\"expression\"": {
		"prefix": "ng-if",
		"description": "If directive: *ngIf=\"expression\"",
		"body": [
			"*ngIf=\"${expression}\"$0"
		]
	},
	"v4: If else directive: *ngIf=\"expression; else\"": {
		"prefix": "ng-if-else",
		"description": "v4: If else directive: *ngIf=\"expression; else\"",
		"body": [
			"<ng-container *ngIf=\"${expression}; else ${elseTemplate}\">",
			"\t$1",
			"</ng-container>",
			"<ng-template #${elseTemplate}>",
			"\t$2",
			"</ng-template>",
			"$0"
		]
	},
	"v4: If then else directive: *ngIf=\"expression; then; else\"": {
		"prefix": "ng-if-then-else",
		"description": "v4: If then else directive: *ngIf=\"expression; then; else\"",
		"body": [
			"<ng-container *ngIf=\"${expression}; then ${thenTemplate}; else ${elseTemplate}\"></ng-container>",
			"<ng-template #${thenTemplate}>",
			"\t$1",
			"</ng-template>",
			"<ng-template #${elseTemplate}>",
			"\t$2",
			"</ng-template>",
			"$0"
		]
	},
	"For-loop directive": {
		"prefix": "ng-for",
		"description": "For-loop directive",
		"body": [
			"*ngFor=\"let ${item} of ${items}\"$0"
		]
	},
	"For-loop directive with li element": {
		"prefix": "ng-for-li",
		"description": "For-loop directive with li element",
		"body": [
			"<li *ngFor=\"let ${item} of ${items}\">$0</li>"
		]
	},
	"For-loop directive with index": {
		"prefix": "ng-for-index",
		"description": "For-loop directive with index",
		"body": [
			"*ngFor=\"let ${item} of ${items}; let i=index\"$0"
		]
	},
	"For-loop directive with trackBy": {
		"prefix": "ng-for-trackBy",
		"description": "For-loop directive with trackBy",
		"body": [
			"*ngFor=\"let ${item} of ${items}; trackBy:${item}.id\"$0"
		]
	},
	"CSS class": {
		"prefix": "ng-class",
		"description": "CSS class",
		"body": [
			"[ngClass]=\"{'${class}': ${true}}\"$0"
		]
	},
	"CSS style": {
		"prefix": "ng-style",
		"description": "CSS style",
		"body": [
			"[ngStyle]=\"{'${property}': ${expression}}\"$0"
		]
	},
	"Switch template": {
		"prefix": "ng-switch",
		"description": "Switch template",
		"body": [
			"<span [ngSwitch]=\"\">",
			"<p *ngSwitchCase=\"true\">",
			"",
			"</p>",
			"<p *ngSwitchCase=\"false\">",
			"",
			"</p>",
			"<p *ngSwitchDefault>",
			"",
			"</p>",
			"</span>"
		]
	},
	"Property: [property]=\"expression\"": {
		"prefix": "ng-binding-oneway",
		"description": "Property: [property]=\"expression\"",
		"body": [
			"[${property}]=\"${expression}\"$0"
		]
	},
	"Event: (event) = \"onEvent()\"": {
		"prefix": "ng-event",
		"description": "Event: (event) = \"onEvent()\"",
		"body": [
			"(${event}) = \"on${Event}()\"$0"
		]
	},
	"Two-way data binding with the NgModel": {
		"prefix": "ng-binding-twoway",
		"description": "Two-way data binding with the NgModel",
		"body": [
			"[(ngModel)]=\"${Name}\"$0"
		]
	},
	"Interpolation: {{ interpolation }}": {
		"prefix": "ng-interpolation",
		"description": "Interpolation: {{ interpolation }}",
		"body": [
			"{{ ${interpolation} }}$0"
		]
	},
	"Use ngFor instead.": {
		"prefix": "ng-repeat",
		"description": "Use ngFor instead.",
		"body": [
			"*ngFor=\"let ${item} of ${items}\"$0"
		]
	},
	"Click event": {
		"prefix": "ng-click",
		"description": "Click event",
		"body": [
			"(click)=\"${expression}\"$0"
		]
	},
	"Usage: Bind to the hidden property.": {
		"prefix": "ng-hide",
		"description": "Usage: Bind to the hidden property.",
		"body": [
			"[hidden]=\"${expression}\"$0"
		]
	},
	"Usage: Bind to the href property.": {
		"prefix": "ng-href",
		"description": "Usage: Bind to the href property.",
		"body": [
			"[href]=\"${url}\"$0"
		]
	},
	"Usage: Bind to the src property.": {
		"prefix": "ng-src",
		"description": "Usage: Bind to the src property.",
		"body": [
			"[src]=\"${url}\"$0"
		]
	},
	"For performance reasons, no comparable pipe exists in Angular 2. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.": {
		"prefix": "ng-orderBy",
		"description": "For performance reasons, no comparable pipe exists in Angular 2. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.",
		"body": [
			"$0"
		]
	},
	"For performance reasons, no comparable pipe exists in Angular 2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.": {
		"prefix": "ng-filter",
		"description": "For performance reasons, no comparable pipe exists in Angular 2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.",
		"body": [
			"$0"
		]
	},
	"A submit button element with a click event": {
		"prefix": "ng-button-submit",
		"description": "A submit button element with a click event",
		"body": [
			"<button type=\"submit\">${Submit}</button>",
			"$0"
		]
	},
	"A button element with a click event": {
		"prefix": "ng-button",
		"description": "A button element with a click event",
		"body": [
			"<button (click)=\"${onClick()}\">${name}</button>",
			"$0"
		]
	},
	"import module or component from path;": {
		"prefix": "ng-import",
		"description": "import module or component from path;",
		"body": [
			"import { ${2:moduleOrComponent} } from '${1:path}';",
			"$0"
		]
	},
	"Http observable get request": {
		"prefix": "ng-http-get",
		"description": "Http observable get request",
		"body": [
			"this.http.get('${url}')",
			"\t.map((res: Response) => {",
			"\t\tres.json();",
			"})$0"
		]
	},
	"HttpClient observable get request": {
		"prefix": "ng-httpClient-get",
		"description": "HttpClient observable get request",
		"body": [
			"this.http.get('${url}')$0"
		]
	},
	"Http observable get & post request": {
		"prefix": "ng-http-get-post",
		"description": "Http observable get & post request",
		"body": [
			"get${Type}(): Observable<I${Type}[]> {",
			"\treturn this.http.get(${name})",
			"\t\t.map((res: Response) => <I${Type}[]>res.json())",
			"\t\t.catch(this.handleError);",
			"}",
			"",
			"add${Type}(${name}: string): Observable<I${Type}> {",
			"\tlet body = JSON.stringify({ ${name} });",
			"\tlet headers = new Headers({ 'Content-Type': 'application/json'});",
			"\tlet options = new RequestOptions({ headers: headers });",
			"",
			"\treturn this.http.post(this.${url}, body, options)",
			"\t\t.map(this.handleResponse)",
			"\t.catch(this.handleError);",
			"}",
			"private handleError(error: Response) {",
			"\tconsole.error(error);",
			"\treturn Observable.throw(error.json().error || 'Server error');",
			"}",
			"$0"
		]
	},
	"pre obj pipe json": {
		"prefix": "ng-debug",
		"description": "pre obj pipe json",
		"body": [
			"<pre>{{ ${obj} | json }}</pre>$0"
		]
	},
	"pre obj pipe async pipe json": {
		"prefix": "ng-debug-async",
		"description": "pre obj pipe async pipe json",
		"body": [
			"<pre>{{ ${obj} | async | json }}</pre>$0"
		]
	},
	"Flex Layout Import": {
		"prefix": "fx-import",
		"description": "Flex Layout Import",
		"body": [
			"import { FlexLayoutModule } from '@angular/flex-layout';",
			"// Add ${FlexLayoutModule.forRoot()} to the @NgModule imports section"
		]
	},
	"Flex Layout Row": {
		"prefix": "fx-row",
		"description": "Flex Layout Row",
		"body": [
			"<div fxLayout=\"row\" fxLayoutAlign=\"${1|start,center,end,space-around,space-between|} ${2|start,center,end,stretch|}\" fxLayoutGap=\"${gap}px\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Property": {
		"prefix": "fx-layout",
		"description": "Flex Layout Property",
		"body": [
			"fxLayout=\"row\"$0"
		]
	},
	"Flex Layout Align Property": {
		"prefix": "fx-layout-align",
		"description": "Flex Layout Align Property",
		"body": [
			"fxLayoutAlign=\"${1|start,center,end,space-around,space-between|} ${2|start,center,end,stretch|}\"$0"
		]
	},
	"Flex Layout Gap Property": {
		"prefix": "fx-layout-gap",
		"description": "Flex Layout Gap Property",
		"body": [
			"fxLayoutGap=\"${gap}px\"$0"
		]
	},
	"Flex Layout Reverse Row": {
		"prefix": "fx-row-reverse",
		"description": "Flex Layout Reverse Row",
		"body": [
			"<div fxLayout=\"row-reverse\" fxLayoutAlign=\"${1|start,center,end,space-around,space-between|} ${2|start,center,end,stretch|}\" fxLayoutGap=\"${gap}px\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Column": {
		"prefix": "fx-col",
		"description": "Flex Layout Column",
		"body": [
			"fxLayout=\"column\" fxLayoutAlign=\"${1|start,center,end,space-around,space-between|} ${2|start,center,end,stretch|}\" fxLayoutGap=\"${gap}px\">$0"
		]
	},
	"Flex Layout Column with Element": {
		"prefix": "fx-col-element",
		"description": "Flex Layout Column with Element",
		"body": [
			"<${1:div} fxLayout=\"column\" fxLayoutAlign=\"${2:|start,center,end,space-around,space-between|} ${4:|start,center,end,stretch|}\" fxLayoutGap=\"${gap}px\">",
			"\t$0",
			"</${1:div}>"
		]
	},
	"Flex Layout Reverse Column": {
		"prefix": "fx-col-reverse",
		"description": "Flex Layout Reverse Column",
		"body": [
			"<div fxLayout=\"column-reverse\" fxLayoutAlign=\"${1|start,center,end,space-around,space-between|} ${2|start,center,end,stretch|}\" fxLayoutGap=\"${gap}px\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Item": {
		"prefix": "fx-item",
		"description": "Flex Layout Item",
		"body": [
			"<div fxFlex=\"${value}%\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Item with fxFlexOffset": {
		"prefix": "fx-item-offset",
		"description": "Flex Layout Item with fxFlexOffset",
		"body": [
			"<div fxFlex=\"${value}%\" fxFlexOffset=\"${offset}px\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Item with fxFlexOrder": {
		"prefix": "fx-item-order",
		"description": "Flex Layout Item with fxFlexOrder",
		"body": [
			"<div fxFlex=\"${value}%\" fxFlexOrder=\"${order}\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Item with fxFlexAlign": {
		"prefix": "fx-item-align",
		"description": "Flex Layout Item with fxFlexAlign",
		"body": [
			"<div fxFlex=\"${value}%\" fxFlexAlign=\"${1|start,baseline,center,end|}\">",
			"\t$0",
			"</div>"
		]
	},
	"Flex Layout Item with fxFlexFill": {
		"prefix": "fx-item-fill",
		"description": "Flex Layout Item with fxFlexFill",
		"body": [
			"<div fxFlex=\"${value}%\" fxFlexFill>",
			"\t$0",
			"</div>"
		]
	},
	"Material drag drop box": {
		"prefix": "m-drag-drop-box",
		"description": "Material drag drop box",
		"body": [
			"<div class=\"$1{drag-drop-box}\" cdkDrag>",
			"</div>$0"
		]
	},
	"Material toolbar": {
		"prefix": "m-toolbar",
		"description": "Material toolbar",
		"body": [
			"<mat-toolbar>",
			"\t<span>${FirstRow}</span>",
			"</mat-toolbar>$0"
		]
	},
	"Material toolbar row": {
		"prefix": "m-toolbar-row",
		"description": "Material toolbar row",
		"body": [
			"<mat-toolbar-row>",
			"\t<span>${FirstRow}</span>",
			"</mat-toolbar-row>$0"
		]
	},
	"Material Toolbar with multiple rows": {
		"prefix": "m-toolbar-multiRow",
		"description": "Material Toolbar with multiple rows",
		"body": [
			"<mat-toolbar>",
			"\t<span>${FirstRow}</span>",
			"\t<mat-toolbar-row>",
			"\t\t<span>${SecondRow}</span>",
			"\t</mat-toolbar-row>",
			"\t<mat-toolbar-row>",
			"\t\t<span>${ThirdRow}</span>",
			"\t</mat-toolbar-row>",
			"</mat-toolbar>$0"
		]
	},
	"Material Font Awesome Icon": {
		"prefix": "m-icon-fontawesome",
		"description": "Material Font Awesome Icon",
		"body": [
			"<mat-icon mat-font-icon=\"fa-${icon}\" class=\"fa\"></mat-icon>$0"
		]
	},
	"Rectangular Material button w/ no elevation.": {
		"prefix": "m-button",
		"description": "Rectangular Material button w/ no elevation.",
		"body": [
			"<button mat-button>${text}</button>$0"
		]
	},
	"Rectangular Material button w/ elevation.": {
		"prefix": "m-button-raised",
		"description": "Rectangular Material button w/ elevation.",
		"body": [
			"<button mat-raised-button>${text}</button>$0"
		]
	},
	"Circular Material button with a transparent background": {
		"prefix": "m-button-icon",
		"description": "Circular Material button with a transparent background",
		"body": [
			"<button mat-icon-button><mat-icon>${icon_name}</mat-icon></button>$0"
		]
	},
	"Circular button w/ elevation.": {
		"prefix": "m-button-fab",
		"description": "Circular button w/ elevation.",
		"body": [
			"<button mat-fab><mat-icon>${icon_name}</mat-icon></button>$0"
		]
	},
	"Small circular button w/ elevation.": {
		"prefix": "m-button-fab-mini",
		"description": "Small circular button w/ elevation.",
		"body": [
			"<button mat-mini-fab><mat-icon>${icon_name}</mat-icon></button>$0"
		]
	},
	"Material toggle button": {
		"prefix": "m-button-toggle",
		"description": "Material toggle button",
		"body": [
			"<mat-button-toggle>${text}</mat-button-toggle>$0"
		]
	},
	"Material Basic Card": {
		"prefix": "m-card",
		"description": "Material Basic Card",
		"body": [
			"<mat-card>",
			"\t$1",
			"</mat-card>$0"
		]
	},
	"Material Card": {
		"prefix": "m-card-full",
		"description": "Material Card",
		"body": [
			"<mat-card>",
			"\t<mat-card-header>",
			"\t\t<mat-card-title>${title}</mat-card-title>",
			"\t\t<mat-card-subtitle>${subtitle}</mat-card-subtitle>",
			"\t</mat-card-header>",
			"\t<mat-card-content>",
			"\t$1",
			"\t</mat-card-content>",
			"\t<mat-card-actions>",
			"\t\t<button mat-button>${Ok}</button>",
			"\t</mat-card-actions>",
			"</mat-card>$0"
		]
	},
	"Material Radio Button": {
		"prefix": "m-radiobutton",
		"description": "Material Radio Button",
		"body": [
			"<mat-radio-group>",
			"\t<mat-radio-button value=\"${value1}\">${Option1}</mat-radio-button>",
			"\t<mat-radio-button value=\"${value2}\">${Option2}</mat-radio-button>",
			"</mat-radio-group>$0"
		]
	},
	"Material Radio Button Option": {
		"prefix": "m-radiobutton-option",
		"description": "Material Radio Button Option",
		"body": [
			"<mat-radio-button value=\"${value}\">${Option}</mat-radio-button>$0"
		]
	},
	"Material Checkbox ngmodel": {
		"prefix": "m-checkbox-ngmodel",
		"description": "Material Checkbox ngmodel",
		"body": [
			"<mat-checkbox [(ngModel)]=\"${property.checkedOrUnchecked}\">${text}</mat-checkbox>$0"
		]
	},
	"Material Checkbox": {
		"prefix": "m-checkbox",
		"description": "Material Checkbox",
		"body": [
			"<mat-checkbox>${text}</mat-checkbox>$0"
		]
	},
	"Material Datepicker": {
		"prefix": "m-datepicker",
		"description": "Material Datepicker",
		"body": [
			"<mat-form-field>",
			"\t<input matInput [matDatepicker]=\"${picker}\" placeholder=\"${title}\">",
			"\t<mat-datepicker-toggle matSuffix [for]=\"${picker}\"></mat-datepicker-toggle>",
			"\t<button matSuffix [matDatepickerToggle]=\"${picker}\"></button>",
			"\t<mat-datepicker #${picker}></mat-datepicker>",
			"</mat-form-field>",
			"$0"
		]
	},
	"Material Input Textbox": {
		"prefix": "m-input",
		"description": "Material Input Textbox",
		"body": [
			"<mat-form-field>",
			"\t<input matInput placeholder=\"${label}\" value=\"${value}\">",
			"</mat-form-field>$0"
		]
	},
	"Material Chip List": {
		"prefix": "m-chip-list",
		"description": "Material Chip List",
		"body": [
			"<mat-chip-list>",
			"\t<mat-chip>${text}</mat-chip>",
			"</mat-chip-list>$0"
		]
	},
	"Material Chip Stacked List": {
		"prefix": "m-chip-list-stacked",
		"description": "Material Chip Stacked List",
		"body": [
			"<mat-chip-list class=\"mat-chip-list-stacked\">",
			"\t<mat-chip>${text}</mat-chip>",
			"</mat-chip-list>$0"
		]
	},
	"Material Chip": {
		"prefix": "m-chip",
		"description": "Material Chip",
		"body": [
			"<mat-chip>${text}</mat-chip>$0"
		]
	},
	"Material Select": {
		"prefix": "m-select",
		"description": "Material Select",
		"body": [
			"<mat-select placeholder=\"${Placeholder}\" [(ngModel)]=\"selectedValue\" name=\"${item}\">",
			"\t<mat-option *ngFor=\"let ${item} of ${items}\" [value]=\"${item}.value\">",
			"\t\t{{${item}.viewValue}}",
			"\t</mat-option>",
			"</mat-select>$0"
		]
	},
	"Material SVG Icon": {
		"prefix": "m-icon-svg",
		"description": "Material SVG Icon",
		"body": [
			"<mat-icon svgIcon=\"${src}\"></mat-icon>$0"
		]
	},
	"Material Icon": {
		"prefix": "m-icon",
		"description": "Material Icon",
		"body": [
			"<mat-icon>${icon}</mat-icon>$0"
		]
	},
	"Material Icon with a Badge": {
		"prefix": "m-icon-badge",
		"description": "Material Icon with a Badge",
		"body": [
			"<mat-icon",
			"\tcolor=\"primary\"",
			"\tmatBadge=\"${number}\"",
			"\tmatBadgePosition=\"${2|above,below|} ${3|after,before|}\"",
			"\tmatBadgeColor=\"accent\">",
			"\t\t${icon}",
			"</mat-icon>$0"
		]
	},
	"Material Slide toggle": {
		"prefix": "m-slide-toggle",
		"description": "Material Slide toggle",
		"body": [
			"<mat-slide-toggle>${text}</mat-slide-toggle>$0"
		]
	},
	"Material Slider": {
		"prefix": "m-slider",
		"description": "Material Slider",
		"body": [
			"<mat-slider min=\"${min}\" max=\"${max}\" step=\"${step}\" value=\"${value}\"></mat-slider>$0"
		]
	},
	"Material Vertical Slider": {
		"prefix": "m-slider-vertical",
		"description": "Material Vertical Slider",
		"body": [
			"<mat-slider vertical min=\"${min}\" max=\"${max}\" step=\"${step}\" value=\"${value}\"></mat-slider>$0"
		]
	},
	"Material Slider thumbLabel": {
		"prefix": "m-slider-thumbLabel",
		"description": "Material Slider thumbLabel",
		"body": [
			"<mat-slider thumbLabel tickInterval=\"${interval}\"></mat-slider>$0"
		]
	},
	"Material Slider tickInterval": {
		"prefix": "m-slider-tickInterval",
		"description": "Material Slider tickInterval",
		"body": [
			"<mat-slider step=\"${step}\" tickInterval=\"${interval}\"></mat-slider>$0"
		]
	},
	"Material Slider tickInterval Auto": {
		"prefix": "m-slider-tickInterval-auto",
		"description": "Material Slider tickInterval Auto",
		"body": [
			"<mat-slider tickInterval=\"auto\"></mat-slider>$0"
		]
	},
	"Material List": {
		"prefix": "m-list",
		"description": "Material List",
		"body": [
			"<mat-list>",
			"\t<mat-list-item>${item}</mat-list-item>$1",
			"</mat-list>$0"
		]
	},
	"Material List ngFor": {
		"prefix": "m-list-ngfor",
		"description": "Material List ngFor",
		"body": [
			"<mat-list>",
			"\t<mat-list-item *ngFor=\"let ${item} of ${items}\">{{ ${item} }}</mat-list-item>$1",
			"</mat-list>$0"
		]
	},
	"Material List Item": {
		"prefix": "m-list-item",
		"description": "Material List Item",
		"body": [
			"<mat-list-item>${item}</mat-list-item>$0"
		]
	},
	"Material Tab Group": {
		"prefix": "m-tab-group",
		"description": "Material Tab Group",
		"body": [
			"<mat-tab-group>",
			"\t<mat-tab label=\"${TabHeader1}\">$1</mat-tab>",
			"\t<mat-tab label=\"${TabTabHeader2}\">$2</mat-tab>",
			"</mat-tab-group>$0"
		]
	},
	"Material Tab": {
		"prefix": "m-tab",
		"description": "Material Tab",
		"body": [
			"<mat-tab label=\"${TabHeader}\">$1</mat-tab>$0"
		]
	},
	"Material Tooltip": {
		"prefix": "m-tooltip",
		"description": "Material Tooltip",
		"body": [
			"matTooltip=\"${text}\"$0"
		]
	},
	"Material Tooltip position": {
		"prefix": "m-tooltip-position",
		"description": "Material Tooltip position",
		"body": [
			"[matTooltipPosition]=\"${1|above,below,left,right,before,after|}\"$0"
		]
	},
	"Material Tooltip with position": {
		"prefix": "m-tooltip-with-position",
		"description": "Material Tooltip with position",
		"body": [
			"matTooltip=\"${text}\" [matTooltipPosition]=\"${1|above,below,left,right,before,after|}\"$0"
		]
	},
	"Material Table": {
		"prefix": "m-table",
		"description": "Material Table",
		"body": [
			"<table mat-table #table [dataSource]=\"${dataSource}\">",
			"\t<ng-container matColumnDef=\"${column}\">",
			"\t\t<th mat-header-cell *matHeaderCellDef> ${header} </th>",
			"\t\t<td mat-cell *matCellDef=\"let row\"> {{row.${column}}} </td>",
			"\t</ng-container>",
			"\t<tr mat-header-row *matHeaderRowDef=\"['${column}']\"></tr>",
			"\t<tr mat-row *matRowDef=\"let row; columns: ['${column}'];\"></tr>",
			"</table>$0"
		]
	},
	"Material Table Column": {
		"prefix": "m-table-column",
		"description": "Material Table Column",
		"body": [
			"<ng-container matColumnDef=\"${column}\">",
			"\t<th mat-header-cell *matHeaderCellDef> ${header} </th>",
			"\t<td mat-cell *matCellDef=\"let row\"> {{row.${column}}} </td>",
			"</ng-container>$0"
		]
	},
	"Material Grid List": {
		"prefix": "m-grid-list",
		"description": "Material Grid List",
		"body": [
			"<mat-grid-list cols=\"${cols}\" rowHeight=\"${height}px\">",
			"\t<mat-grid-tile",
			"\t\t*ngFor=\"let ${tile} of ${tiles}\"",
			"\t\t[colspan]=\"${tile}.cols\"",
			"\t\t[rowspan]=\"${tile}.rows\"",
			"\t\t{{${tile}.text}}>",
			"\t</mat-grid-tile>",
			"</mat-grid-list>$0"
		]
	},
	"Material Paginator": {
		"prefix": "m-paginator",
		"description": "Material Paginator",
		"body": [
			"<mat-paginator [length]=\"${length}\"",
			"\t[pageSize]=\"${pageSize}\"",
			"\t[pageSizeOptions]=\"${pageSizeOptions}\"",
			"\t(page)=\"pageEvent = $${event}\">",
			"</mat-paginator>$0"
		]
	},
	"Material Determinate Spinner": {
		"prefix": "m-spinner",
		"description": "Material Determinate Spinner",
		"body": [
			"<mat-spinner",
			"\t[value]=\"${value}\">",
			"</mat-spinner>$0"
		]
	},
	"Material indeterminate Progress Bar": {
		"prefix": "m-progress-bar-indeterminate",
		"description": "Material indeterminate Progress Bar",
		"body": [
			"<mat-progress-bar",
			"\tmode=\"indeterminate\">",
			"</mat-progress-bar>$0"
		]
	},
	"Material Query Progress Bar": {
		"prefix": "m-progress-bar-query",
		"description": "Material Query Progress Bar",
		"body": [
			"<mat-progress-bar",
			"\tmode=\"query\">",
			"</mat-progress-bar>$0"
		]
	},
	"Material Buffer Progress Bar": {
		"prefix": "m-progress-bar-buffer",
		"description": "Material Buffer Progress Bar",
		"body": [
			"<mat-progress-bar",
			"\tmode=\"buffer\"",
			"\t[color]=\"${color}\"",
			"\t[value]=\"${value}\"",
			"\t[bufferValue]=\"${bufferValue}\">",
			"</mat-progress-bar>$0"
		]
	},
	"Material Determinate Progress Bar": {
		"prefix": "m-progress-bar",
		"description": "Material Determinate Progress Bar",
		"body": [
			"<mat-progress-bar",
			"\tmode=\"determinate\"",
			"\t[value]=\"${value}\">",
			"</mat-progress-bar>$0"
		]
	},
	"Material Expansion Panel": {
		"prefix": "m-expansion-panel",
		"description": "Material Expansion Panel",
		"body": [
			"<mat-expansion-panel>",
			"\t<mat-expansion-panel-header>",
			"\t\t${title}",
			"\t</mat-expansion-panel-header>",
			"\t${content}",
			"</mat-expansion-panel>$0"
		]
	},
	"Material Accordion": {
		"prefix": "m-accordion>",
		"description": "Material Accordion",
		"body": [
			"<mat-accordion>",
			"\t<mat-expansion-panel>",
			"\t\t<mat-expansion-panel-header>",
			"\t\t\t${title}",
			"\t\t</mat-expansion-panel-header>",
			"\t\t${content}",
			"\t</mat-expansion-panel>",
			"\t<mat-expansion-panel>",
			"\t\t<mat-expansion-panel-header>",
			"\t\t\t${title2}",
			"\t\t</mat-expansion-panel-header>",
			"\t\t${content2}",
			"\t</mat-expansion-panel>",
			"</mat-accordion>$0"
		]
	},
	"Material Vertical Stepper": {
		"prefix": "m-step",
		"description": "Material Vertical Stepper",
		"body": [
			"<mat-step label=\"${label}\">",
			"\t$1",
			"</mat-step>",
			"$0"
		]
	},
	"Material Horizontal Stepper": {
		"prefix": "m-stepper-horizontal",
		"description": "Material Horizontal Stepper",
		"body": [
			"<mat-horizontal-stepper>",
			"\t<mat-step label=\"${label1}\">",
			"\t\t$1",
			"\t</mat-step>",
			"\t<mat-step label=\"${label2}\">",
			"\t\t$2",
			"\t</mat-step>",
			"</mat-horizontal-stepper>$0"
		]
	},
	"Material Indeterminate Spinner": {
		"prefix": "m-spinner-indeterminate",
		"description": "Material Indeterminate Spinner",
		"body": [
			"<mat-spinner",
			"\t[mode]=\"indeterminate\">",
			"</mat-spinner>$0"
		]
	},
	"Material Divider": {
		"prefix": "m-divider",
		"description": "Material Divider",
		"body": [
			"<mat-divider>",
			"</mat-divider>$0"
		]
	},
	"Material Inset Divider": {
		"prefix": "m-divider-inset",
		"description": "Material Inset Divider",
		"body": [
			"<mat-divider",
			"\t[inset]=\"true\">",
			"</mat-divider>$0"
		]
	},
	"Material Vertical Divider": {
		"prefix": "m-divider-vertical",
		"description": "Material Vertical Divider",
		"body": [
			"<mat-divider",
			"\t[vertical]=\"true\">",
			"</mat-divider>$0"
		]
	},
	"PWA Link Manifest": {
		"prefix": "pwa-link-manifest",
		"description": "PWA Link Manifest",
		"body": [
			"<link rel=\"manifest\" href=\"./manifest.json\">$0"
		]
	},
	"Angular content": {
		"prefix": "ng-content",
		"description": "Angular content",
		"body": [
			"<ng-content #${1:name}></ng-content>",
			"$0"
		]
	}
}