I'd love to see a few snippets for quickly creating a form. A few useful ones would be

a-form

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
</form>

a-form-submit

<button type="submit" [disabled]="!myForm.form.valid">
    Save
</button>

Hi, i would like to know your font name in visual studio code(preview of Angular TypeScript Snippets for VS Code). Can you tell it, please?

the path to angular 2 core package was changed from "angular2/angular2" to "angular2/core", please update it. Thanks.

These two directive may add to your vscode-angular2-snippets. Thanks!

Having snippets for creating custom validator functions and classes would be very useful.

İ am install to vscode angularv4 but visual code
It started to fail constantly

I install new vscode in 1.9.1 version and install "Angular TypeScript Snippets" in Extensions View .
Reload is ok,but Extensions view always show "reload" icon in the extension .it should be error.
No show the reload icon is right.

Btw install angular2 screen of lastest vscode and web install tutor guide is different. No "Angular 2 TypeScript Snippets" item to select.

I'm not sure if this was done on purpose, but quite a lot of the snippets have dangling comma's like the NgModule.

import { NgModule } from '@angular/core';

import { NameComponent }   from './name.component';

@NgModule({
    imports: [],
    exports: [],
    declarations: [NameComponent],
    providers: [],                    // < Here
})
export class NameModule { }

Other snippets have that as well. I know some people like dangling comma's due to the fact that diffs tend to be smaller if you add extra properties at the end. Just wanted to ask first before doing a PR and remove them.

Hi, I have made the script to convert your VS Code snippets to WebStorm LiveTemplates.
Could you add link to my repo in this project read me file?
(https://github.com/MrZaYaC/ng2-webstorm-snippets)

It seems as if a-prej is missing a dollar-sign, since there is a 1 at the beginning of the snippet, but it does not get autoselected.

I would appreciate it if you could fix this, since I am using this snippet very often.

Thanks

If I'm not wrong, the export is missing for the ng2directiveSimple snippet.
Totally awesome plugin though 👍

Hey John,
there are few dots missing in ng2-pipe snippet. I believe it should be:

transform(value: any, ...args: any[]) : any

Source

Please provide us with the following information:

OS and Version?

Windows 10

Versions

8.1.0 (2019-06-07)

Repro steps

a-route-params-subscribe
creates

this.route.params
  .pipe(map(params => params.get('id')), tap(id => (this.id = +id)))
  .subscribe(id => function()());

However, the angular documentation says

params—An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

Also, there doesn't seem to be a reason to write function()() in the subscribe part.

So, it should be changed to

this.route.paramMap
  .pipe(switchMap(params => params.get('id')), tap(id => (this.id = +id)))
  .subscribe(id => { });

Help wanted!

I'm looking to add a series of ngrx snippets to this extension. Please propose them here in the issues and once agreed, y'all can add PRs to add them. Or I can add them if you prefer.

We'd really love to adapt and bundle these Angular 2 snippets with the AngularJS plugin for WebStorm and other IntelliJ IDEA-based IDEs. Would you mind us doing that? Thank you!

Hi, I'm on the VS Code team. We recently released support for Remote Development and I noticed that your may extension need a small change to ensure users have a good experience when using it remote workspaces.

What is the issue?

To make remote development as transparent as possible to users, VS Code distinguishes two classes of extensions:

• UI Extensions: These extensions make contributions to the VS Code user interface and are always run on the user's local machine. UI Extensions cannot directly access files in the workspace, or run scripts/tools installed in that workspace or on the machine. Example UI Extensions include: themes, snippets, language grammars, and keymaps.

• Workspace Extensions: These extensions are run on the same machine as where the workspace is located. When in a local workspace, Workspace Extensions are run on the local machine. When in a remote workspace, Workspace Extensions are run on the remote machine. Workspace Extensions can access files in the workspace to provide rich, multi-file language services, debugger support, or perform complex operations on multiple files in workspace (either themselves or by invoking scripts/tools).

You can find more details about this architecture here.

VS Code currently infers that your extension is a Workspace Extension. This means that users who have your extension installed must also install it to the remote in order to use it in remote workspaces. I believe that your extension should probably be a UI extension instead. That way your extension will always be enabled for users who install it, even if they open a remote workspace.

How do I fix this?

To tell VS Code that your extension is a UI extension, just add "extensionKind": "ui" to your extension's package.json.

UI Extensions always run on the user's local machine, even when they open a remote workspace.

I'll submit a PR that does this. Please let me know if you have any questions or concerns about the issue. We've also put together a guide to help you test your extension in remote workspaces

PS: As a temporary workaround for a few popular extensions, we've automatically added your extension to an internal whitelist so that is always treated as a UI extension

Hello there,

In your README.md file - "Installation" section the gif you are referring to is no longer available (link).

Thank you for your time! :)

SystemJS uses __moduleName instead of module.id.

I will add a PR.

I have a usual Angular application (that you can run with ng serve on the CLI). Having the Firefox debug extension installed, only snippets for Chrome and Edge appear, however.

OS and Version?

Windows 10

Mention any other details that might be useful.

moved from firefox-devtools/vscode-firefox-debug#132

vscode:1.5.3
vscode-angular2-snippets version 1.0.1

Hi everybody!

I was wondering whether there's a reason that there is no snippet for creating directives? From my perspective it would totally make sense to have one.

What do you think?

Hello.
Please add ability to install this extension offline.

In a typescript file when I got to insert a snippet such as a-component, when I type "a-" the first time i'm in a file the angular snippets don't show in the code completion. If i backspace and remove the "a-" and then type in "a-" again the available snippets show up. This only happens in newly created typescript files. Existing typescript files don't have this issue.

After installing these wonderful snippets, they are now being suggested almost everywhere (except when using the 'dot-into' operator on a type), such as when trying to list the properties of an object.
Where I noticed it was when "ctrl+space listing" the properties of the @Component metadata object.

What I concretely did was to use the ng2-controller template to create a new controller. Then, because I am new to AngularJS, I moved the keyboard cursor into the argument object of the @Component call to see what else (except for moduleId, selector and templateUrl) was available there. So I hit "ctrl+space" and was overwhelmed with the code templates also showing there, where I guess, they would not be valid.

At first glance, it does not seem obvious how to use several of the snippets - for example, just entering in a-http-get and tabbing does not apply the snippet in VS Code. Similarly with a-service-http.

I could file a PR updating the README if anyone has any ideas on how to use them.

I noticed that the snippet that this extension generates and what Angular CLI generates are not same. It should be a good idea to keep them in sync so that irrespective of what tools people use, the snippets are consistent.

Hi!
Having snippets for creating uirouting modules would be very useful.
Like this:

import {NgModule} from '@angular/core';
import {Ng2StateDeclaration, UIRouterModule} from '@uirouter/angular';

import {AnalysisComponent} from './analysis.component';

const states: Ng2StateDeclaration[] = [
  {
    parent: 'parent',
    name: 'state',
    url: '/state',
    component: AnalysisComponent
  },
];

@NgModule({
  imports: [UIRouterModule.forChild({states})],
  exports: [UIRouterModule],
})
export class AnalysisRoutingModule {
  public static routedComponents = [AnalysisComponent];
}

More of a question then an issue: not sure about VSCode extensibility, but would it be possible to have file templates? which also create all the related files, like it happens with the ng cli, but when you cannot use the cli? For example when using the JavaScriptServices for ASP.NET Core I don't want to bring in all the stuff added by the CLI.

Hi,

I am only able to use HTML snippets, there is not typescript like a-component snippets available to me for some reason...

VS Code version 1.9.1
Angular2 snippets version 2.0.3

Angular makes sense to be known as "Angular" as the versions will change more frequently and breaking changes are foreseen to be frequent and minor, according to the team's roadmap. Thus all are encouraged to just call it "Angular" (no version).

These snippets use ng2- as a prefix. When v4 is released, they will still be valid. Do we change the prefix for every version? Or do we just drop the version? I'm leaning to dropping the version.

So what options do we have?

• ng-
• a-
• angular-
• `` (no prefix)

ng- could make sense, but it conflicts with what is built-in for many IDEs, even without an extension. This could make it difficult to determine when coding in those environments which is Angular 1 and which is Angular. Thus we won't be choosing this.

Prefixes should be short, so angular- is out.

Omitting a prefix sounds good, but in practice it makes it difficult to see all the snippets grouped together since most tools show them alphabetically. So this is out.

This leaves us with something short, that makes sense, and does not conflict .... thus I am leaning towards a- as the prefix.

v8 supports the import syntax. adding that shortly ...

I'm wondering if anyone can point me in the direction of a tool for snippets for karma tests. I'm building an Ionic app that I'm trying to add unit testing to. I'm modeling my tests structure after this repository. Here is an example of a spec file for a component from that repository.

Thanks in advanced :)

I think we need SharedModule snippet

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

const modules = [
  CommonModule,
];

@NgModule({
  imports: [ modules ],
  exports: [ modules ],
  declarations: []
})
export class SharedModule { }

`

Good to have this missing directive while working with dynamic form controls.

It would be very nice if this plugin could use the tslint file to apply the correct syntax.

In my case, every time I generate some typescripts snippet, I have to replace simple quote with double quote.

OS and Version?

Windows 10

Versions

master

Repro steps

Snipper a-service-httpclient contain wrong imports
It doesn't provide HttpClient.

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/common/http';

@Injectable()
export class ServiceNameService {
  constructor(private httpClient: HttpClient) { }
  
}

I don't know where to ask about this. The font and theme showed in the screenshot is awesome. can you tell me what they are ?

OS and Version?

macOS (High Sierra)

Versions

v.2.9.0

Repro steps

a-guard-can-activate-child

The log given by the failure.

Class AuthGuard incorrectly implements interface CanActivateChild.
Property canActivateChild is missing in type 'AuthGuard'.

I always have to create this file, in my new module which is lazy loaded

Suppose I have about module, then I have to create about.routing.ts file and add

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: AboutComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

this content to it, and then go to its module, and add routing to the imports. Can this be automated in this snippets repo or in angular-cli?

a-output-event snippet currently is as follows:

@Output() eventName: EventEmitter<eventType> = new EventEmitter<eventType>();

There is only one variable for this snippet that changes both the eventName and the eventType, which I believe is not a desired result, since you end up with an output named boolean or an EventEmitter of type confirm.

I may create a pull request to change this if you would like, but first I wanted to point it out.

Great job with those snippets, by the way. They speed up the process a lot!

Whenever i use the import snippet, it generates the import statement with " quotes. The tslint throws a error suggestion a replace with ' quotes.

System:
VS Code 1.10+
Angular 5+
Ng Cli 1.7+

Thanks,
Bhushan

Hi John

Thanks for a nice snippet pack.

Could you somehow make it configurable wether to add 'module : module.Id' or not?

When using Angular Cli for compiling and all that, due to (i think) webpack, that line is giving compile errors.

I am getting the following error in my Visual Studio Code IDE

If it is issue with proxy then how to set proxy for Visual Studio Code?

Good to have these while working with Reactive Forms.

We've been developing a handful of in-house component and service libs, and these snippets have saved me a lot of time the last couple of weeks. So thank you!

The angular CLI has generated spec files for all types of angular entities since day one, and we're quite happy that version 6+ supports library generation out of the box. But the structure that the CLI scaffolds is oftentimes a bit too rigid for our use cases. We tend to follow the folder and file structure of the wonderful @angular/material2 library. So we usually write spec files ourselves.

Another motivation or spec snippets would be that sometimes components and directives have to work together to achieve a certain behaviour (i.e. an autocomplete component where there is an input, a trigger, an option container and some options). This is usually tested inside a test host component. While this might technically be classified as an integration test, we still tend to write these sort of tests in a spec file in the containing folder (autocomplete.integration.spec.ts).

A final motivation is that, while scarce, I assume there are still projects out there that do not depend on the CLI whatsoever, and do not reap the benefits of the CLI's spec scaffolding.

I've been working on this yesterday and have a few spec snippets done (component, service, pipe, directive). I'd be more than willing to submit a PR for those. Or I can finish snippets for interceptors, guards etc, but maybe that could be a follow-up PR?

I'm tagging you in this issue @wardbell, as @johnpapa mentioned you were also interested in/working on spec snippets. What do you think of this suggestion?

Regards,
Wouter Spaak

HTML snippets such as ngFor and ngIf are not working in .ts files, when we are defining templates in "`" (back-ticks) Is it possible to make them work there?