feat: add more snippets

Author: hardikpthv

CHANGELOG.md

@@ -1,8 +1,18 @@
+<a name="10.0.0"></a>
+
+# 10.0.0 (2020-09-25)
+
+* Updated [`README.md`](https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md) for new snippets
+* Added HTML snippets for
+  * `<<mat-icon>` control
+  * `<cdk-tree>` control
+  * `matSort` directive with `matSortChange` event  
+
 <a name="7.0.1"></a>
 
 # 7.0.1 (2019-03-09)
 
-* Added documentation to [`README.md`](https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md) for new snippets
+* Updated [`README.md`](https://github.com/hardikpthv/vscode-ng-material-snippets/blob/master/README.md) for new snippets
 * Added HTML snippets for
   * `<mat-table>` control
   * `<mat-cell>` control

README.md

@@ -1,7 +1,8 @@
-# Angular Material v7 Snippets for VS Code
+# Angular Material v10 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)
+[![Downloads](https://vsmarketplacebadge.apphb.com/downloads-short/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/)
 
@@ -15,7 +16,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 v7 snippets`
+1.  Choose the extension `Angular Material v10 snippets`
 1.  Reload Visual Studio Code
 
 ## Usage
@@ -88,15 +89,20 @@ Start typing `a-md-*` and hit `enter`, the snippet spreads out.
 | a-md-tree             | `<mat-tree>` control                                               |
 | a-md-tree-node        | `<mat-tree-node>` control                                          |
 | a-md-tree-nested-node | `<mat-nested-tree-node>` control                                   |
+| a-md-icon             | `<mat-icon>` control                                               |
+| a-md-sort             | `matSort` directive with `matSortChange` event                     |
+| a-md-tree             | `<cdk-tree>` control                                               |
 
 ### TypeScript Snippets
 
 | Snippet       | Purpose                     |
 | ------------- | --------------------------- |
 | a-md-snackbar | `MatSnackBar` configuration |
 
-### Using NgRx in Angular Apps
+### Using NgRx or WebComponents 🤔
 
-- Check out [NgRx Snippets](https://bit.ly/ngrx-vscode)
+- Check out:
+  - [NgRx Snippets](https://bit.ly/ngrx-vscode)
+  - [Webcomponents and Lit Snippets](https://bit.ly/lit-vscode)
 
 #### Inspiration from [Angular Typescript Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) by [John Papa](https://github.com/johnpapa/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "AngularMaterial",
-  "displayName": "Angular Material v7 snippets",
+  "displayName": "Angular Material v10 snippets",
   "description": "Angular Material with HTML and TypeScript snippets",
   "version": "7.0.0",
   "publisher": "hardikpthv",

snippets/html.json

@@ -543,5 +543,51 @@
       "<!-- press ctrl + space to add more column snippet or delete this line -->\n"
     ],
     "description": "<mat-header-cell> column for </mat-table> control "
+  },
+  "matIcon": {
+    "prefix": "a-md-icon",
+    "body": [
+      "<mat-icon aria-hidden=\"false\" aria-label=\"{2:label} icon\">${1:icon}</mat-icon>"
+    ],
+    "description": "mat-icon control"
+  },
+  "matSort": {
+    "prefix": "a-md-sort",
+    "body": ["matSort (matSortChange)=\"${1:methodName}($event)\""],
+    "description": "matSort directive with matSortChange event"
+  },
+  "cdkTree": {
+    "prefix": "a-md-tree",
+    "body": [
+      "<cdk-tree [dataSource]=\"${1:dataSource}\" [treeControl]=\"${2:treeControl}\">",
+      "\t<cdk-tree-node",
+      "\t\t*cdkTreeNodeDef=\"let node;\"",
+      "\t\tcdkTreeNodePadding",
+      "\t\t[style.display]=\"${4:logic}\"",
+      "\t>",
+      "\t\t<button mat-icon-button disabled></button>",
+      "\t\t{{node.name}}",
+      "\t</cdk-tree-node>",
+      "\t<cdk-tree-node",
+      "\t\t*cdkTreeNodeDef=\"let node; when: hasChild\"",
+      "\t\tcdkTreeNodePadding",
+      "\t\t[style.display]=\"${4:logic}\"",
+      "\t>",
+      "\t\t<button",
+      "\t\t\tmat-icon-button",
+      "\t\t\tcdkTreeNodeToggle",
+      "\t\t\t[attr.aria-label]=\"'Toggle ' + node.name\"",
+      "\t\t\t(click)=\"node.isExpanded = !node.isExpanded\"",
+      "\t\t\t[style.visibility]=\"node.expandable ? 'visible' : 'hidden'\"",
+      "\t\t>",
+      "\t\t\t<mat-icon class=\"mat-icon-rtl-mirror\">",
+      "\t\t\t\t{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}",
+      "\t\t\t</mat-icon>",
+      "\t\t</button>",
+      "\t\t{{node.name}}",
+      "\t</cdk-tree-node>",
+      "</cdk-tree>"
+    ],
+    "description": "<cdk-tree> control"
   }
 }