Angular Material v10 Snippets for VS Code

This extension for Visual Studio Code adds snippets of HTML and TypeScript for Angular Material.

Have a look at CHANGELOG for the latest changes

Installation

1. Install Visual Studio Code 1.10.0 or higher
2. Launch VS Code
3. Hit Cmd-Shift-P (macOS) or Ctrl-Shift-P (Windows, Linux)
4. Select Install Extension
5. Choose the extension Angular Material v10 snippets
6. Reload Visual Studio Code

Usage

Start typing a-md-* and hit enter, the snippet spreads out.

HTML Snippets

Snippet	Purpose
a-md-auto-complete	<mat-autocomplete> control with *ngFor
a-md-badge	matBadge with all configutration
a-md-badge-button	matBadge on button mat-button
a-md-button	mat-button basic button
a-md-button-link	mat-button basic button with routerLink
a-md-raised-button	mat-raised-button button
a-md-button-toggles	<mat-button-toggle-group> control
a-md-icon-button	mat-icon-button button
a-md-card	<mat-card> control basic card
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-data-table	<mat-table> control
a-md-datepicker	<mat-datepicker> control
a-md-divider	<mat-divider> control
a-md-inset-divider	<mat-divider> control configured inset
a-md-ex-panel	<mat-expansion-panel> control for expandable summary view
a-md-fab	mat-fab Floating action button
a-md-fab-mini	mat-mini-fab Floating action mini button
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-fc	matInput with formControlName enclosed <mat-form-field>
a-md-input-ngModel	matInput with ngModel enclosed <mat-form-field>
a-md-input-error	mat-error control for matInput
a-md-input-icon	matInput wtih icon suffixed
a-md-list	<mat-list> control with default <mat-list-item>
a-md-list-item	<mat-list-item> single item
a-md-selection-list	<mat-selection-list> control with default <mat-list-option>
a-md-list-option	<mat-list-option> single item
a-md-icon-list	<mat-list> with default <mat-icon matListIcon>
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-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
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 or WebComponents 🤔

• Check out:
  • NgRx Snippets
  • Webcomponents and Lit Snippets

Inspiration from Angular Typescript Snippets by John Papa