added html snippets

hardikpthv · Nov 4, 2017 · e01b5dd · e01b5dd
1 parent c2f2757
commit e01b5dd
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+<a name="1.2.0"></a>
+# 1.2.0 (2017-11-04)
+
+* Added HTML snippets for
+  * `<mat-option>` control for `<mat-select>`
+  * `<mat-radio-button>` control  
+
+* Fixed HTML snippets for
+  * `<mat-select>` with/without `ngModel`
+  * `<mat-select>` placeholder
+  * `matInput` placeholder
+
 <a name="1.1.0"></a>
 # 1.1.0 (2017-10-29)
 

diff --git a/README.md b/README.md
@@ -23,32 +23,35 @@ Start typing `a-md-*` and hit `enter`, the snippet spreads out.
 
 | Snippet                      | Purpose                             		                            |
 |------------------------------|--------------------------------------------------------------------|
-| a-md-auto-complete           | `<mat-autocomplete>`  control with `*ngFor`                        |
-| a-md-card         		       | `<mat-card>` control basic card                                    |
-| a-md-checkbox                | `<mat-checkbox>` control with `ngModel`                            |
-| a-md-datepicker              | `<mat-datepicker>` control 					                              |
-| a-md-ex-panel                | `<mat-expansion-panel>` control for expandable summary view        |
-| a-md-grid                    | `<mat-grid-list>` control for grid-based layout 				          	|
-| a-md-grid-tile               | `<mat-grid-tile>` Grid tile for `<mat-grid-list>` control          |
-| a-md-input                   | `matInput` directive					                                      |
-| a-md-input-ngModel           | `matInput` with `ngModel` 					                                |
-| a-md-input-error             | `mat-error` control for `matInput`				                          |
-| a-md-input-icon              | `matInput` wtih icon suffixed				                              |
-| a-md-menu		                 | `<mat-menu>` control with default items                            |
-| a-md-menu-nested             | Nested `<md-menu>` with default items                              |
-| a-md-menu-with-icon		       | `<mat-menu>` control with default items and icon                   |
-| a-md-paginator               | `<mat-paginator>` control for pagination                           |
-| a-md-progress-bar            | `<mat-progress-bar>` control with `indeterminate` mode             |
-| 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-select                  | `<mat-select>` control with `ngModel`		                          |
-| a-md-slider                  | `<mat-slider>` control default horizontal                          |
-| a-md-slider-vertical         | `<mat-slider>` control vertical                                    |
+| a-md-auto-complete           | `<mat-autocomplete>`  control with `*ngFor` |
+| a-md-card         		   | `<mat-card>` control basic card |
+| a-md-checkbox                | `<mat-checkbox>` control with `ngModel` |
+| a-md-datepicker              | `<mat-datepicker>` control |
+| a-md-ex-panel                | `<mat-expansion-panel>` control for expandable summary view |
+| a-md-grid                    | `<mat-grid-list>` control for grid-based layout |
+| a-md-grid-tile               | `<mat-grid-tile>` Grid tile for `<mat-grid-list>` control |
+| a-md-input                   | `matInput` directive |
+| a-md-input-ngModel           | `matInput` with `ngModel` |
+| a-md-input-error             | `mat-error` control for `matInput`	|
+| a-md-input-icon              | `matInput` wtih icon suffixed	|
+| a-md-menu		               | `<mat-menu>` control with default items |
+| a-md-menu-nested             | Nested `<md-menu>` with default items |
+| a-md-menu-with-icon		   | `<mat-menu>` control with default items and icon |
+| a-md-paginator               | `<mat-paginator>` control for pagination |
+| a-md-progress-bar            | `<mat-progress-bar>` control with `indeterminate` mode |
+| 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-select                  | `<mat-select>` control |
+| a-md-select-ngModel          | `<mat-select>` control with `ngModel` |
+| a-md-sel-opt                 | `<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-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-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 |
 
 #### Inspiration from [Angular Typescript Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) by [John Papa](https://github.com/johnpapa/)
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "AngularMaterial",
     "displayName": "Angular Material v2 snippets",
     "description": "Angular Material with HTML snippets",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "publisher": "hardikpthv",
     "icon": "images/angular.png",
     "galleryBanner": {

diff --git a/snippets/html.json b/snippets/html.json
@@ -88,7 +88,7 @@
         "prefix": "a-md-input",
         "body": [
             "<mat-form-field>",
-            "\t<input matInput placeholder=\"Favorite food\">",
+            "\t<input matInput placeholder=\"${1:hint}\">",
             "</mat-form-field>"
         ],
         "description": "matInput control"
@@ -209,17 +209,40 @@
         "prefix": "a-md-radio",
         "body": [
             "<mat-radio-group>",
-            "\t<mat-radio-button value=\"1\">Option 1</mat-radio-button>",
-            "\t<mat-radio-button value=\"2\">Option 2</mat-radio-button>",
+            "\t<mat-radio-button value=\"${1:val}\">${1:val}</mat-radio-button>",
+            "\t<mat-radio-button value=\"${2:val}\">${2:val}</mat-radio-button>",
             "</mat-radio-group>"
         ],
         "description": "<mat-radio-group> control with default <mat-radio-button>"
     },
+    "matRadioBtn": {
+        "prefix": "a-md-radio-btn",
+        "body": [
+            "\t<mat-radio-button value=\"${1:val}\">${1:val}</mat-radio-button>"
+        ],
+        "description": "<mat-radio-button> button"
+    },
     "matSelect": {
         "prefix": "a-md-select",
         "body": [
-            "<mat-select placeholder=\"Favorite food\" [(ngModel)]=\"${1:model}\" name=\"food\">",
-            "\t<mat-option *ngFor=\"let ${2:item} of ${3:list} | async \" [value]=\"${2:item}\">{{${2:item}}}</mat-option>",
+            "<mat-select placeholder=\"${1:hint}\">",
+            "\t<mat-option [value]=\"${2:val}\">{{${2:val}}}</mat-option>",
+            "</mat-select>"
+        ],
+        "description": "<mat-select> control"
+    },
+    "matSelectOption": {
+        "prefix": "a-md-sel-opt",
+        "body": [
+            "\t<mat-option [value]=\"${1:val}\">{{${1:val}}}</mat-option>"
+        ],
+        "description": "<mat-option> for <mat-select>"
+    },
+    "matSelectWithNgModel": {
+        "prefix": "a-md-select-ngModel",
+        "body": [
+            "<mat-select placeholder=\"${4:hint}\" [(ngModel)]=\"${1:model}\" name=\"food\">",
+            "\t<mat-option *ngFor=\"let ${2:item} of ${3:list} \" [value]=\"${2:item}\">{{${2:item}}}</mat-option>",
             "</mat-select>"
         ],
         "description": "<mat-select> control with ngModel"