Cheat Sheet Emmet

Posted : admin On 1/29/2022
  1. Emmet Cheat Sheet (2017-03) Syntax.1 Child:. Sibling: +.
  2. Visual Studio Code keyboard Shortcuts helps developers maximize their productivity by allowing them to work faster and more efficiently. Here I am listing down all the keyboard shortcuts and cheats of Visual Studio Code editor for Windows, Mac and Linux Operating systems.
  3. To create skeleton of HTML. To create a skeleton of HTML, type exclamation mark(!) and click the.
  1. Cheap Sheet Metal Box
  2. Cheat Sheet Emmett Till
Cheat sheet meme

Cheat Sheet; More developer tools: Emmet LiveStyle Real-time bi-directional edit tool for CSS, LESS and SCSS. Emmet Re:view Fast and easy way to test responsive design side-by-side. Download cheat sheet as printable PDF A5. Support: [email protected] Created with DocPad and Gulp.js.

Visual Studio Code TypeScript and Html snippets and code examples for Angular 2,4,5,6,7,8,9 & 10.

All code snippets are based on and follow the Angular style guide

The source for the snippets come from:

and most of all, none of this would exist without the help of all the contributers for fixing, enhancing, testing and making suggestions.

ng-Angular Snippets
fx-Angular Flex Layout Snippets
ngrx-Angular NgRx Snippets
ngxs-Angular Ngxs Snippets
m-Angular Material Design Snippets
rx-RxJS Snippets for both TypeScript and JavaScript
sw-Service Workers Snippets
t-Test Snippets
e-Test Expect Snippets
pwa-Progressive Web Applications Snippets
-cheatsheetCheat Sheet

This extension is optimized for developers that use Angular and are no longer using AngularJS (Angular 1).If you type in AngularJS keywords, it will suggest an Angular solutions.This is by design and meant to help developers learn how AngularJS concepts and techniques map to Angular.

See example below for ng-repeat and ng-click:

All Angular snippets starts with 'ng-'.Multiple snippets come in multiple variations. For instance when you want to create a new component you can choose between having the template and css inline or not:

  • ng-component
  • ng-component-inline



ng-for currently has even more variations, so make sure you pick the one you want before you press enter:

  • ng-for
  • ng-for-index
  • ng-for-li
  • ng-for-trackBy

Angular Material

All Material snippets starts with 'm-' and there are now over 50 Material snippets in this package.

You don't need to type any dashes: 'ngrxr' -> 'ng-rx-reducer' snippet

TypeScript & Html Snippets

'': ',ng-content
cli-cheatsheetCli Cheat Sheet
e-atbrExpectAsync toBeResolved
e-ntbExpect Not toBe
e-ntbdExpect not toBe Defined
e-ntbfExpect not toBe Falsy
e-ntbnExpect Not toBeNull
e-ntbtExpect not toBe Truthy
e-ntbuExpect not toBe Undefined
e-nthbcExpect Not toHaveBeenCalled
e-ntmExpect Not toMatch
e-ntmrExpect Not toMatch regex
e-tbExpect toBe
e-tbctExpect toBeCloseTo
e-tbdExpect toBe Defined
e-tbfExpect toBe Falsy
e-tbgtExpect toBeGreaterThan
e-tbgtoeExpect toBeGreaterThanOrEqual
e-tbioExpect toBeInstanceOf
e-tbltExpect toBeLessThan
e-tbltoeExpect toBeLessThanOrEqual
e-tbnExpect toBeNull
e-tbtExpect toBe Truthy
e-tbuExpect toBe Undefined
e-tcExpect toContain
e-thbcExpect toHaveBeenCalled
e-thbcwExpect toHaveBeenCalledWith
e-thlrwExpect toHaveLastReturnedWith(value)
e-thnrwExpect toHaveNthReturnedWith(nthCall, value)
e-thpExpect toHaveProperty
e-thrtExpect toHaveReturnedTimes(2)
e-thrwExpect toHaveLastReturnedWith(value)
e-tmExpect toMatch
e-tmoExpect toMatchObject
e-tmrExpect toMatch regex
e-tmsJest Expect toMatchSnapshot
e-tseExpect toStrictEqual
fx-colFlex Layout Column
fx-col-elementFlex Layout Column with Element
fx-col-reverseFlex Layout Reverse Column
fx-importFlex Layout Import
fx-itemFlex Layout Item
fx-item-alignFlex Layout Item with fxFlexAlign
fx-item-fillFlex Layout Item with fxFlexFill
fx-item-offsetFlex Layout Item with fxFlexOffset
fx-item-orderFlex Layout Item with fxFlexOrder
fx-layoutFlex Layout Property
fx-layout-alignFlex Layout Align Property
fx-layout-gapFlex Layout Gap Property
fx-rowFlex Layout Row
fx-row-reverseFlex Layout Reverse Row
m-accordion>Material Accordion
m-buttonRectangular Material button w/ no elevation.
m-button-fabCircular button w/ elevation.
m-button-fab-miniSmall circular button w/ elevation.
m-button-flatRectangular Material flat button.
m-button-iconCircular Material button with a transparent background
m-button-raisedRectangular Material button w/ elevation.
m-button-strokedRectangular Material button with a transparent background and a stroke.
m-button-toggleMaterial toggle button
m-cardMaterial Basic Card
m-card-fullMaterial Card
m-checkboxMaterial Checkbox
m-checkbox-ngmodelMaterial Checkbox ngmodel
m-chipMaterial Chip
m-chip-listMaterial Chip List
m-chip-list-stackedMaterial Chip Stacked List
m-datepickerMaterial Datepicker
m-dividerMaterial Divider
m-divider-insetMaterial Inset Divider
m-divider-verticalMaterial Vertical Divider
m-drag-drop-boxMaterial drag drop box
m-expansion-panelMaterial Expansion Panel
m-grid-listMaterial Grid List
m-iconMaterial Icon
m-icon-badgeMaterial Icon with a Badge
m-icon-fontawesomeMaterial Font Awesome Icon
m-icon-svgMaterial SVG Icon
m-inputMaterial Input Textbox
m-listMaterial List
m-list-itemMaterial List Item
m-list-ngforMaterial List ngFor
m-paginatorMaterial Paginator
m-progress-barMaterial Determinate Progress Bar
m-progress-bar-bufferMaterial Buffer Progress Bar
m-progress-bar-indeterminateMaterial indeterminate Progress Bar
m-progress-bar-queryMaterial Query Progress Bar
m-radiobuttonMaterial Radio Button
m-radiobutton-optionMaterial Radio Button Option
m-selectMaterial Select
m-slide-toggleMaterial Slide toggle
m-sliderMaterial Slider
m-slider-thumbLabelMaterial Slider thumbLabel
m-slider-tickIntervalMaterial Slider tickInterval
m-slider-tickInterval-autoMaterial Slider tickInterval Auto
m-slider-verticalMaterial Vertical Slider
m-spinnerMaterial Determinate Spinner
m-spinner-indeterminateMaterial Indeterminate Spinner
m-stepMaterial Vertical Stepper
m-stepper-horizontalMaterial Horizontal Stepper
m-stepper-verticalMaterial Vertical Stepper
m-tabMaterial Tab
m-tab-groupMaterial Tab Group
m-tableMaterial Table
m-table-columnMaterial Table Column
m-toolbarMaterial toolbar
m-toolbar-multiRowMaterial Toolbar with multiple rows
m-toolbar-rowMaterial toolbar row
m-tooltipMaterial Tooltip
m-tooltip-positionMaterial Tooltip position
m-tooltip-with-positionMaterial Tooltip with position
nest-controllerNest Controller
nest-dtoNest Data Transfer Object with Swagger
nest-serviceNest Service
nest-swagger-mainNest Add Swagger to main.ts
ng-afterContentCheckedLifecycle hook: Called after every check of the component's or directive's content
ng-afterContentInitLifecycle hook: Called after ngOnInit when the component's or directive's content has been initialized
ng-afterViewCheckedLifecycle hook: Called after every check of the component's view. Applies to components only
ng-afterViewInitLifecycle hook: Called after ngAfterContentInit when the component's view has been initialized
ng-binding-onewayProperty: [property]='expression'
ng-binding-twowayTwo-way data binding with the NgModel
ng-bootstrapingBootstraping example
ng-buttonA button element with a click event
ng-button-submitA submit button element with a click event
ng-classCSS class
ng-clickClick event
ng-componentComponent with template and style urls
ng-component-inlineComponent with inline Template and Styles
ng-component-value-accessorAngular Component With NG_VALUE_ACCESSOR
ng-confThe World's Original Angular Conference
ng-containerAngular Container
ng-container-componentAngular Container with *ngContainerOutlet
ng-container-ngforAngular Container with *ngFor
ng-container-templateAngular Container with *ngTemplateOutlet
ng-controllerUse component instead.
ng-debugpre obj pipe json
ng-debug-asyncpre obj pipe async pipe json
ng-directiveDirective template
ng-directive-attributeAttribute directive
ng-directive-cssCSS directive
ng-doCheckLifecycle hook: Called every time that the input properties of a component or a directive are checked
ng-eventEvent: (event) = 'onEvent()'
ng-filterFor performance reasons, no comparable pipe exists in Angular 2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
ng-forFor-loop directive
ng-for-indexFor-loop directive with index
ng-for-liFor-loop directive with li element
ng-for-trackByFor-loop directive with trackBy
ng-girlsAngular Girls
ng-hideUsage: Bind to the hidden property.
ng-hrefUsage: Bind to the href property.
ng-http-getHttp observable get request
ng-http-get-postHttp observable get & post request
ng-http-interceptorIntercept an outgoing HttpRequest and optionally transform it or the response.
ng-httpClient-getHttpClient observable get request
ng-ifIf directive: *ngIf='expression'
ng-if-elsev4: If else directive: *ngIf='expression; else'
ng-if-then-elsev4: If then else directive: *ngIf='expression; then; else'
ng-importimport module or component from path;
ng-inputClass Input Property
ng-interpolationInterpolation: {{ interpolation }}
ng-material-moduleApp Material Module
ng-modelngModel directive: [(ngModel)]='name'
ng-moduleFeature Module
ng-module-rootApp root module
ng-ngOnChangesLifecycle hook: Called before any other lifecycle hook
ng-onDestroyLifecycle hook: Called before the instance is destroyed
ng-onInitLifecycle hook: Called after the constructor
ng-orderByFor performance reasons, no comparable pipe exists in Angular 2. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
ng-outputClass Output Event
ng-pipePipe template
ng-pipe-asyncAsync pipe - Usage: observable_or_promise_expression async
ng-pipe-currencyCurrency pipe - Usage: money currency:'EUR'
ng-pipe-dateDate pipe - Default format: 09/15/1971
ng-pipe-date-customDate pipe - Format: 'MM/dd/yy' = 09/15/71
ng-pipe-date-fullFull date pipe - Format: Wednesday, September 15, 1971
ng-pipe-date-shortShort date pipe - Format: 09/15/1971
ng-pipe-decimalDecimal pipe - Usage: number_expression decimal[:digitInfo]
ng-pipe-exampleAngular pipe example
ng-pipe-jsonJson pipe - Usage: object json
ng-pipe-lowercaseLowercase pipe
ng-pipe-percentPercent pipe - Usage: number_expression percent[:digitInfo]
ng-pipe-sliceSlice pipe - Usage: array_or_string_expression slice:start[:end]
ng-pipe-titlecasev4: Titlecase pipe
ng-pipe-uppercaseUppercase pipe
ng-propertyProperty: [property]='expression'
ng-repeatUse ngFor instead.
ng-route-featureAngular Route Feature
ng-route-guard-canactivateCanActivate Guard Route
ng-route-guard-canactivatechildCanActivateChild Route
ng-route-guard-candeactivateCanDeactivate Guard Route
ng-route-guard-canloadCanLoad Guard Route
ng-route-guard-resolveResolve Guard Route
ng-route-lazyRouter link
ng-route-lazy-ivyRouter link
ng-routerRouter template
ng-router-appmoduleRoutes to include in root module
ng-router-attributeRouter link
ng-router-featuremoduleRoutes to include in a feature module
ng-router-linkRouter link
ng-router-linkActiveRouter active link
ng-router-outletRouter outlet element
ng-router-outlet-nameRouter outlet element with name
ng-serviceBasic service
ng-showUsage: Bind to the hidden property.
ng-srcUsage: Bind to the src property.
ng-styleCSS style
ng-switchSwitch template
ng-templateAngular template
ng-validatorAngular validator snippet
ngrx-action-constngRx Single action
ngrx-action-creatorngRx Single action with const
ngrx-action-creator-enumngRx Single action creator for enum
ngrx-actionsngRx Actions class
ngrx-actiontype-enumngRx enum action type
ngrx-actiontypes-enumngRx enum action types
ngrx-effectngRx Effect
ngrx-modulengRx Root Module
ngrx-reducerngRx Reducer
ngrx-utilngRx Util
ngxs-actionNgxs Action
ngxs-action-payloadNgxs Action with Payload
ngxs-selectNgxs Select
ngxs-stateNgxs State
ngxs-state-modelNgxs State Model
ngxs-storeNgxs Store
ngxs-store-importNgxs Import Store
nx-cheatsheetNx Cheat Sheet
nx-ngrx-cheatsheetNx Cheat Sheet
pwa-link-manifestPWA Link Manifest
pwa-manifestPWA Json Manifest
rx-import-observableRxJS Import Observable
rx-import-operatorRxJS Import an Operator
rx-import-subjectRxJS Import Subject
rx-mergeMapRxJS MergeMap Example
sw-registerRegister Service Worker
sw-register-and-checkRegister Service Worker and Check
t-component-asyncTest Async Component
t-component-syncTest Synchronous Component
t-component-sync-oldTest Synchronous Component
t-describe-itDescribe, It & Expect
t-directiveTest a directive
t-iteIt and Expect
t-moduleTest Module
t-pipeTest a pipe
t-serviceTest a service
watA lightning talk by Gary Bernhardt from CodeMash 2012. ng-wat talk by Shai Reznik in 2015

Installation (Mac)

  1. Launch VS Code
  2. Quick Open (⌘+P)
  3. Enter the following command and press enter: 'ext install Angular-BeastCode'
  4. Choose extension (Author: Mikael Morlund)
  5. Reload VS Code

Installation (Windows, Linux)

  1. Launch VS Code
  2. Quick Open (Ctrl-Shift-P)
  3. Enter the following command and press enter: 'ext install Angular-BeastCode'
  4. Choose extension (Author: Mikael Morlund)
  5. Reload VS Code

Cheap Sheet Metal Box


If you want intellisense to show emmets before the snippets, you can force the emmets suggestions to show up at the top, by add the following to your editor user settings:


Cheat Sheet Emmet

Please send any feedback or suggestions to @Mike_BeastCode (Twitter) or create an issue on GitHub.

Open Source

This is an open source project and if you want to contribute I've added issues on github that are easy to start with.



Cheat Sheet Emmett Till

Important: This extension due to the nature of it's purpose will createfiles on your hard drive and if necessary create the respective folder structure.While it should not override any files during this process, I'm not giving any guarantees or take any responsibility in case of lost data.