Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Angular Material v22 snippetsNew to Visual Studio Code? Get it now.
Angular Material v22 snippets

Angular Material v22 snippets

Hardik Pithva

|
52,342 installs
| (3) | Free
Angular Material v22 HTML and TypeScript snippets
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Angular Material v22 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 v22 snippets
  6. Reload Visual Studio Code

Usage

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

Use Extension

HTML Snippets

Snippet Purpose
a-md-auto-complete <mat-autocomplete> control with @for
a-md-badge matBadge with all configuration
a-md-badge-button matBadge on button matButton="elevated"
a-md-button matButton basic button
a-md-button-link matButton link with routerLink
a-md-raised-button matButton="elevated" button
a-md-button-toggles <mat-button-toggle-group> control
a-md-icon-button matIconButton button
a-md-bottom-sheet MatBottomSheet trigger button
a-md-bottom-sheet-content MatBottomSheet content with list item
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-set> control with <mat-chip>
a-md-chip <mat-chip> control for <mat-chip-set>
a-md-data-table <mat-table> control
a-md-data-table-column <mat-table> column definition
a-md-datepicker <mat-datepicker> control
a-md-date-range-picker <mat-date-range-picker> control
a-md-dialog MatDialog trigger button
a-md-dialog-content MatDialog content with actions
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 matFab Floating action button
a-md-fab-mini matMiniFab Floating action mini button
a-md-form-field <mat-form-field> wrapper
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 with 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 matListItemIcon>
a-md-menu <mat-menu> control with default items
a-md-menu-nested Nested <mat-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 with thumb input and configuration
a-md-sidenav <mat-sidenav> control with @for to iterate through nav items
a-md-stepper <mat-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-cdk-tree <cdk-tree> control

TypeScript Snippets

Snippet Purpose
a-md-bottom-sheet MatBottomSheet open and dismiss handlers
a-md-dialog MatDialog open handler
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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft