Code Monkey home page Code Monkey logo

ng2-webstorm-snippets's Introduction

Angular 2 TypeScript Live Templates (Snippets) for WebStorm

This script convert Angular 2 for TypeScript and HTML snippets from Visual Studio Code (Written by John Papa) to WebStorm Live Templates.

Usage in TypeScript

Installing the templates

From JetBrains Plugin repository

  • Open IDE preferences Cmd + ,
  • Go to Plugins -> Browse repositories
  • Type angular and install Angular 2 TypeScript Templates
  • Restart WebStorm

Install Plugin

By Copy xml file

  • Clone repo or download ng2-templates.xml

  • Place the XML file in your templates folder : On OSX that would be ~/Library/Preferences/WebStorm{Version}/templates

  • Restart WebStorm

Usage

Type part of a snippet, press enter, and the snippet unfolds.

TypeScript Angular Snippets

a-component                 // component
a-component-root            // root app component
a-directive                 // directive
a-guard-can-activate        // CanActivate guard
a-guard-can-activate-child  // CanActivateChild guard
a-guard-can-deactivate      // CanDeactivate guard
a-guard-can-load            // CanLoad guard
a-http-get                  // http.get with Rx Observable
a-module                    // module
a-module-root               // root app module
a-module-routing            // routing module file (forChild)
a-output-event              // @Output event and emitter
a-pipe                      // pipe
a-route-path-404            // 404 route path
a-route-path-default        // default route path
a-route-path-eager          // eager route path
a-route-path-lazy           // lazy route path
a-service                   // service
a-service-http              // service with Http
a-ctor-skip-self            // angular ngmodule's skipself constructor
a-subscribe                 // Rx Observable subscription

TypeScript RxJS Snippets

rx-observable               // Rx Observable import
rx-subject                  // Rx Subject import
rx-replay-subject           // Rx ReplaySubject import
rx-behavior-subject         // Rx BehaviorSubject import
rx-add-operator             // Rx add operator import
rx-add-observable           // Rx add observable import

###HTML Snippets

a-class                     // [class] binding
a-select                    // <select> control
a-style                     // [style] binding
a-ngClass                   // ngClass
a-ngFor                     // *ngFor
a-ngForAsync                // *ngFor with async
a-ngIf                      // *ngIf
a-ngIfElse                  // *ngIf with else
a-ngModel                   // ngModel
a-routerLink                // routerLink
a-routerLink-param          // routerLink with a route parameter
a-ngStyle                   // ngStyle
a-ngSwitch                  // ngSwitch
a-prej                      // pre debug | json
a-preja                     // pre debug | async | json

Usage in HTML

ng2-webstorm-snippets's People

Contributors

mrzayac avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ng2-webstorm-snippets's Issues

А вот еще один интересный вопрос.

Привет. Не знаю, как связаться с тобой другим способом, но вижу, что ты кое-как разбираешься в современных технологиях. Пиши мне в gitter-e или скайпе: pavel_belick - возможно будем друг другу полезны ;)

NgOnChanges needed

Hello, thanks for the snippets.
I could really use an ngOnChanges snippet. I can also implement it if you don't have time.

trackBy not recognized as valid syntax

In templates, using trackBy in ngFor is not recognized as a valid syntax.
Check screenshot:

image

I even tried with a space between semicolon and trackBy expression, still that does not work.

Would love to see this fixed. I am on intellij 2017.2.2

create new Observable needed

Create new Observable like this:

return new Observable<$type$>((subscriber: Subscriber<$type$>) => {
});$END$

This might come in handy

Thanks

I just saw the ngConf presentation by JohnPapa and hoped that Webstorm has snippets for this too, just like his VS Code. Thanks @MrZaYaC for moving so quiickly and getting it out to us within a few days.

💯 You can now close this "issue" :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.