added html and typescript snippets

hardikpthv · hardikpthv · commit 6bd841ecb0de · 2018-12-08T18:41:55.000+05:30
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,28 @@
+<a name="7.0.0"></a>
+
+# 7.0.0 (2018-12-08)
+
+* Updated documentation to [`README.md`](https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md) for new snippets
+* Added HTML snippets for
+  * `matRipple` directive
+  * `matRippleColor` directive
+  * `<mat-horizontal-stepper>` control
+  * `<mat-step>` control
+  * `<mat-tree>` control  
+  * `<mat-tree-node>` control  
+  * `<mat-nested-tree-node>` control  
+  * `<mat-chip-list>` control
+  * `<mat-chip>` control
+* Added TypeScript snippets for
+  * `MatSnackBar` configuration
+  
 <a name="6.1.0"></a>
 
 # 6.1.0 (2018-09-22)
 
-* Added documentation to `README.md` for new snippets
+* Added documentation to [`README.md`](https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md) for new snippets
 * Added issues and homepage url to `package.json`
 * Added HTML snippets for
-
   * `<mat-card>` control, no header, body and actions
   * `<mat-checkbox>` control with `formControlName`
   * `matInput` with `formControlName` enclosed `<mat-form-field>`   
@@ -15,9 +32,7 @@
   * `<mat-selection-list>` control with default `<mat-list-option>` 
   * `<mat-list-option>` single item                         
   * `<mat-list>` with default `<mat-icon matListIcon>` 
-
 * Fixed HTML snippets for
-
   * added `role` in `a-md-auto-complete` for accessibility support
   * added projection for title to `a-md-badge-button`
   * added placeholder projection in `a-md-input-icon`
@@ -28,16 +43,13 @@
   * updated formatting for `a-md-sidenav`
   * removed unnecessary items from `a-md-menu-with-icon`
   
-
-
 <a name="6.0.0"></a>
 
 # 6.0.0 (2018-05-26)
 
 * Added documentation to `README.md` for new snippets
 * Updated the `README.md` for v6
 * Added HTML snippets for
-
   * `mat-badge` directive
   * `mat-button` directive
   * `mat-raised-button` directive
@@ -46,7 +58,6 @@
   * `mat-mini-fab` directive
   * `<mat-button-toggle-group>` control
   * `<mat-divider>` control
-
 * Fixed HTML snippets for
   * `a-md-sel-opt` to `a-md-select-option`
 
@@ -58,8 +69,8 @@
 
   * `<mat-option>` control for `<mat-select>`
   * `<mat-radio-button>` control
-
 * Fixed HTML snippets for
+
   * `<mat-select>` with/without `ngModel`
   * `<mat-select>` placeholder
   * `matInput` placeholder
@@ -73,8 +84,8 @@
   * `<mat-error>` control for `matInput`
   * `matInput` directive
   * `matInput` with icon
-
 * Fixed HTML snippets for
+
   * `matInput` with/without `ngModel`
 
 <a name="1.0.2"></a>
@@ -88,6 +99,7 @@
 # 1.0.1 (2017-10-19)
 
 * Fixed tab sequence in HTML snippets for
+
   * `<mat-autocomplete>` control
   * `<mat-card>` control
 
@@ -96,6 +108,7 @@
 # 1.0.0 (2017-10-14)
 
 * Added HTML snippets for
+
   * `<mat-expansion-panel>` control
   * `<mat-grid-list>` control
   * `<mat-grid-tile>` control
diff --git a/README.md b/README.md
@@ -1,12 +1,11 @@
-# Angular Material v6 Snippets for VS Code
+# Angular Material v7 Snippets for VS Code
 
 [![Version](https://vsmarketplacebadge.apphb.com/version/hardikpthv.AngularMaterial.svg)](https://marketplace.visualstudio.com/items?itemName=hardikpthv.AngularMaterial)
 [![Install](https://vsmarketplacebadge.apphb.com/installs/hardikpthv.AngularMaterial.svg)](https://marketplace.visualstudio.com/items?itemName=hardikpthv.AngularMaterial)
 [![Ratings](https://vsmarketplacebadge.apphb.com/rating-short/hardikpthv.AngularMaterial.svg)](https://marketplace.visualstudio.com/items?itemName=hardikpthv.AngularMaterial)
 [![made-for-VSCode](https://img.shields.io/badge/Made%20for-VSCode-1f425f.svg)](https://code.visualstudio.com/)
 
-
-This extension for Visual Studio Code adds snippets of HTML for Angular Material.
+This extension for Visual Studio Code adds snippets of HTML and TypeScript for Angular Material.
 
 Have a look at [CHANGELOG](CHANGELOG.md) for the latest changes
 
@@ -16,7 +15,7 @@ Have a look at [CHANGELOG](CHANGELOG.md) for the latest changes
 1.  Launch VS Code
 1.  Hit `Cmd`-`Shift`-`P` (macOS) or `Ctrl`-`Shift`-`P` (Windows, Linux)
 1.  Select `Install Extension`
-1.  Choose the extension `Angular Material v2 snippets`
+1.  Choose the extension `Angular Material v7 snippets`
 1.  Reload Visual Studio Code
 
 ## Usage
@@ -41,6 +40,8 @@ Start typing `a-md-*` and hit `enter`, the snippet spreads out.
 | a-md-card-simple      | `<mat-card>` control simple card                                   |
 | a-md-checkbox         | `<mat-checkbox>` control with `ngModel`                            |
 | a-md-checkbox-fc      | `<mat-checkbox>` control with `formControlName`                    |
+| a-md-chips            | `<mat-chip-list>` control with `<mat-chip>`                        |
+| a-md-chip             | `<mat-chip>` control for `<mat-chip-list>`                         |
 | a-md-datepicker       | `<mat-datepicker>` control                                         |
 | a-md-divider          | `<mat-divider>` control                                            |
 | a-md-inset-divider    | `<mat-divider>` control configured `inset`                         |
@@ -67,18 +68,31 @@ Start typing `a-md-*` and hit `enter`, the snippet spreads out.
 | a-md-progress-spinner | `<mat-progress-spinner>` control with `indeterminate` mode         |
 | a-md-radio            | `<mat-radio-group>` control with default `<mat-radio-button>`      |
 | a-md-radio-btn        | `<mat-radio-button>` button                                        |
+| a-md-ripple           | `matRipple` and `matRippleColor` directives                        |
+| a-md-ripple-container | Ripple container                                                   |
 | a-md-select           | `<mat-select>` control                                             |
 | a-md-select-fc        | `<mat-select>` control with `formControlName`                      |
 | a-md-select-ngModel   | `<mat-select>` control with `ngModel`                              |
 | a-md-select-option    | `<mat-option>` for `<mat-select>`                                  |
 | a-md-slider           | `<mat-slider>` control default horizontal                          |
 | a-md-slider-vertical  | `<mat-slider>` control vertical                                    |
 | a-md-sidenav          | `<mat-sidenav>` control with `*ngFor` to iterate through nav items |
+| a-md-stepper          | `<mat-horizontal-stepper>` control with `<mat-step>`               |
+| a-md-step             | `<mat-step>` control with `<form>`                                 |
 | a-md-switch           | `<mat-slide-toggle>` switch control                                |
 | a-md-tab              | `<mat-tab>` control with set of two tabs                           |
 | a-md-toolbar          | `<mat-toolbar>` control with primary color as default              |
 | a-md-tooltip          | `matTooltip` directive to display tooltip                          |
 | a-md-tooltip-position | `matTooltipPosition` directive to set position                     |
+| a-md-tree             | `<mat-tree>` control                                               |
+| a-md-tree-node        | `<mat-tree-node>` control                                          |
+| a-md-tree-nested-node | `<mat-nested-tree-node>` control                                   |
+
+### TypeScript Snippets
+
+| Snippet       | Purpose                     |
+| ------------- | --------------------------- |
+| a-md-snackbar | `MatSnackBar` configuration |
 
 ### Using NgRx in Angular Apps
 
diff --git a/package.json b/package.json
@@ -1,42 +1,46 @@
 {
-  "name": "AngularMaterial",
-  "displayName": "Angular Material v6 snippets",
-  "description": "Angular Material with HTML snippets",
-  "version": "6.1.0",
-  "publisher": "hardikpthv",
-  "license": "MIT",
-  "icon": "images/angular.png",
-  "galleryBanner": {
-    "color": "#3f51b5",
-    "theme": "dark"
-  },
-  "homepage": "https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md",
-  "bugs": {
-    "url": "https://github.com/hardikpthv/vscode-ng-material-snippets/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/hardikpthv/vscode-ng-material-snippets.git"
-  },
-  "keywords": [
-    "Angular",
-    "Angular 6",
-    "Material",
-    "Angular Material",
-    "HTML"
-  ],
-  "engines": {
-    "vscode": "^1.10.0"
-  },
-  "categories": [
-    "Snippets"
-  ],
-  "contributes": {
-    "snippets": [
-      {
-        "language": "html",
-        "path": "./snippets/html.json"
-      }
-    ]
-  }
-}
+    "name": "AngularMaterial",
+    "displayName": "Angular Material v7 snippets",
+    "description": "Angular Material with HTML snippets",
+    "version": "7.0.0",
+    "publisher": "hardikpthv",
+    "license": "MIT",
+    "icon": "images/angular.png",
+    "galleryBanner": {
+        "color": "#3f51b5",
+        "theme": "dark"
+    },
+    "homepage": "https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md",
+    "bugs": {
+        "url": "https://github.com/hardikpthv/vscode-ng-material-snippets/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/hardikpthv/vscode-ng-material-snippets.git"
+    },
+    "keywords": [
+        "Angular",
+        "Angular 6",
+        "Material",
+        "Angular Material",
+        "HTML"
+    ],
+    "engines": {
+        "vscode": "^1.10.0"
+    },
+    "categories": [
+        "Snippets"
+    ],
+    "contributes": {
+        "snippets": [
+            {
+                "language": "html",
+                "path": "./snippets/html.json"
+            },
+            {
+                "language": "typescript",
+                "path": "./snippets/typescript.json"
+            }
+        ]
+    }
+}
diff --git a/snippets/html.json b/snippets/html.json
@@ -442,5 +442,77 @@
       "</mat-list>"
     ],
     "description": "<mat-list> control with icon"
+  },
+  "matRipple": {
+    "prefix": "a-md-ripple",
+    "body": ["matRipple [matRippleColor]=\"${1:color}\""],
+    "description": "matRipple and matRippleColor directives"
+  },
+  "matRippleContainer": {
+    "prefix": "a-md-ripple-container",
+    "body": ["<div matRipple [matRippleColor]=\"${1:color}\">", "\t", "</div>"],
+    "description": "Ripple container"
+  },
+  "matHorizontalStepper": {
+    "prefix": "a-md-stepper",
+    "body": [
+      "<mat-horizontal-stepper [linear]=\"${1:isLinear}\" #stepper>",
+      "\t<mat-step [stepControl]=\"${2:formGroup}\">",
+      "\t\t<form></form>",
+      "\t\t<div>",
+      "\t\t\t<button mat-button matStepperNext>Next</button>",
+      "\t\t</div>",
+      "\t</mat-step>",
+      "</mat-horizontal-stepper>"
+    ],
+    "description": "<mat-horizontal-stepper> control"
+  },
+  "matHorizontalStep": {
+    "prefix": "a-md-step",
+    "body": [
+      "<mat-step [stepControl]=\"${1:formGroup}\">",
+      "\t<form></form>",
+      "\t<div>",
+      "\t\t<button mat-button matStepperPrevious>Back</button>",
+      "\t\t<button mat-button matStepperNext>Next</button>",
+      "\t</div>",
+      "</mat-step>"
+    ],
+    "description": "<mat-step> control"
+  },
+  "matTree": {
+    "prefix": "a-md-tree",
+    "body": [
+      "<mat-tree>",
+      "\t<mat-tree-node>${1:parent}</mat-tree-node>",
+      "\t<mat-tree-node> -- ${2:child}</mat-tree-node>",
+      "</mat-tree>"
+    ],
+    "description": "<mat-tree> control"
+  },
+  "matTreeNode": {
+    "prefix": "a-md-tree-node",
+    "body": ["<mat-tree-node>${1:value}</mat-tree-node>"],
+    "description": "<mat-tree-node> control"
+  },
+  "matTreeNestedNode": {
+    "prefix": "a-md-tree-nested-node",
+    "body": ["<mat-nested-tree-node>${1:value}</mat-nested-tree-node>"],
+    "description": "<mat-nested-tree-node> control"
+  },
+  "matChips": {
+    "prefix": "a-md-chips",
+    "body": [
+      "<mat-chip-list>",
+      "\t<mat-chip>${1:val1}</mat-chip>",
+      "\t<mat-chip>${2:val2}</mat-chip>",
+      "</mat-chip-list>"
+    ],
+    "description": "<mat-chip-list> control with <mat-chip>"
+  },
+  "matChip": {
+    "prefix": "a-md-chip",
+    "body": ["<mat-chip>${1:val}</mat-chip>"],
+    "description": "<mat-chip> control for <mat-chip-list>"
   }
 }
diff --git a/snippets/typescript.json b/snippets/typescript.json
@@ -0,0 +1,15 @@
+{
+  "matAutoComplete": {
+    "prefix": "a-md-snackbar",
+    "body": [
+      "//import {MatSnackBar} from '@angular/material';",
+      "//constructor(public snackBar: MatSnackBar) {}",
+      "openSnackBar(message: string, action: string) {",
+      "\tthis.snackBar.open(message, action, {",
+      "\t\tduration: ${1:duration},",
+      "\t});",
+      "}"
+    ],
+    "description": "MatSnackBar configuration"
+  }
+}
