Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Chatham NG4 SnippetsNew to Visual Studio Code? Get it now.
Chatham NG4 Snippets

Chatham NG4 Snippets

Chatham Financial

|
318 installs
| (0) | Free
Chatham NG4 Snippets to standardize the code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Chatham NG4 Snippets Package

For all your ng4 needs.

  • Description

  • Usage

    • HTTP Service Snippets

    • Component Snippets

    • Directive Snippets

  • Package Creation

  • Extension Installation

  • Known Issues

Description

This extension aims to provide you with a standarized code for angular 4 solutions in Chatham projects

Usage

You can use the following snippets by typing the prefix, the snippet will be suggested in a dropdown, you can trigger it by pressing ctrl + space or while typing:

HTTP Service Snippets

Chatham HTTP Service Class

  • prefix:

      ch-service
    
  • preview:

Imgur Image

  • body:

      import { Injectable } from '@angular/core';
      import { Http } from '@angular/http';
      import { Observable } from 'rxjs/Rx';
    
      @Injectable()
      export class ServiceNameService {
          modelNameObserver: Observable<observableType>;
          baseUrl: string = 'baseUrl';
    
          constructor(private http: Http) { }
    
          getentityName(): Observable<observableType> {
              let requestUrl = `${this.baseUrl}/getEndpoint/`;
              return this.modelNameObserver = this.http.get(requestUrl).map(res => res.json());
          }
    
          postentityName(param: paramType): Observable<returnType> {
              let requestUrl = `${this.baseUrl}/postEndpoint/`;
              return this.http.post(requestUrl, { data : param }).map(res => res.json());
          }
    
    
      }
    

Chatham HTTP Service GET Method

  • prefix:

      ch-service-get
    
  • preview:

Imgur Image

  • body:

      getentityName(): Observable<observableType> {
          let requestUrl = `${this.baseUrl}/getEndpoint/`;
          return this.modelNameObserver = this.http.get(requestUrl).map(res => res.json());
      }
    

Chatham HTTP Service POST Method

  • prefix:

      ch-service-post
    
  • preview:

Imgur Image

  • body:

      postentityName(param: paramType): Observable<returnType> {
          let requestUrl = `${baseUrl}/postEndpoint/`;
          return this.http.post(requestUrl, { data : param }).map(res => res.json());
      }
    

Chatham HTTP Service Unit Tests Class

  • prefix:

      ch-service-unit-tests
    
  • preview:

Imgur Image

  • body:

      import { TestBed, async, inject } from '@angular/core/testing';
      import { Http, BaseRequestOptions, RequestMethod, ConnectionBackend, Response, ResponseOptions } from '@angular/http';
      import { MockBackend, MockConnection } from '@angular/http/testing';
    
      import {  ServiceClass } from './ service-file-name.service';
      import 'rxjs/add/operator/map';
    
      describe(' ServiceClass HTTP Service Tests', () => {
          let service;
    
          beforeEach(() => {
              TestBed.configureTestingModule({
                  declarations: [],
                  providers: [
                      BaseRequestOptions,
                      MockBackend,
                      ConnectionBackend,
                      {
                          provide: Http, useFactory: (backend, options) => new Http(backend, options),
                          deps: [MockBackend, BaseRequestOptions]
                      }
                  ]
              });
          });
    
          it(' GetMethodName should return the data', (done) => {
              //Arrange
              let mockBackend: MockBackend = TestBed.get(MockBackend);
              let  mockResponse:  MockType= { }
    
              mockBackend.connections.subscribe((connection: MockConnection) => {
                  const req = connection.request;
                  const expectedUrl = '/ expectedGetUrl';
                  expect(connection.request.method).toBe(RequestMethod.Get);
                  expect(connection.request.url).toBe(expectedUrl);
    
                  connection.mockRespond(new Response(new ResponseOptions({
                  body: reportingHeaderFilers
                  })));
              });
              let http = new Http(mockBackend, TestBed.get(BaseRequestOptions));
              let service = new GeneratedReportsFiltersService(http);
    
              //Act
              let observable = service. GetMethodName();
    
              //Assert
              observable.subscribe((result) => {
                  expect(result).toBe(reportingHeaderFilers);
                  done();
              });
          });
      })
    

Component Snippets

Chatham Component

  • prefix:

      ch-component
    
  • preview:

Imgur Image

  • body:

      import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
    
      @Component({
          selector: 'component-selector',
          template: `templateHTML`,
          styles: [require('./component-selector.component.scss')]
      })
      export class ComponentNameComponent implements OnInit {
          @Input() inputName: inputType;
          @Output() outputName = new EventEmitter<outputType>();
    
          constructor() { }
    
          ngOnInit() {
    
          }
      }
    

Chatham Component Unit Test

  • prefix:

      ch-component-unit-tests
    
  • preview:

Imgur Image

  • body:

      import { async, ComponentFixture, TestBed } from '@angular/core/testing';
      import { ComponentClass } from './component-file-name.component';
      import { ServiceClass } from '../service-file-name.service';
    
      describe('ComponentClass component tests', () => {
          let component: ComponentClassName;
          let fixture: ComponentFixture<ComponentClassName>;
          let mockServiceObject = {};
    
          beforeEach(async(() => {
              TestBed.configureTestingModule({
                  declarations: [ComponentClassName],
                  imports: [],
                  providers: [
                      { provide: ServiceClass, useValue: mockServiceObject }
                  ]
              })
              .compileComponents();
          }));
    
          beforeEach(() => {
              fixture = TestBed.createComponent(ComponentClassName);
              component = fixture.componentInstance;
              fixture.detectChanges();
          });
    
          it('should instantiate the ComponentClassName', () => {
              expect(component).toBeDefined();
          });
    
          describe('ngOnInit()', () => {
              it('should do something on ngInit', () => {
                  //Arrange
                  let mockModel: mockType = {};
                  let serviceObject = TestBed.get(ServiceClass);
    
                  serviceObject.serviceObjectMethod = (params: any) => {
                      return Observable.of(mockModel);
                  }
    
                  //Act
                  component.ngOnInit();
    
                  //Assert
                  expect(component.componentProperty).toBe(mockModel.mockModelProperty);
                  expect(serviceObject.serviceObjectMethod).toHaveBeenCalled();
              });
          });
      });
    

Directive Snippets

Chatham Directive

  • prefix:

      ch-directive
    
  • preview:

Imgur Image

  • body:

      import { Directive, ElementRef, Input } from '@angular/core';
    
      @Directive({
          selector: '[selector]'
      })
      export class DirectivetNameDirective {
          @Input() inputName: inputType;
    
          private element: HTMLElement;
    
          constructor(element: ElementRef) {
              this.element = element.nativeElement;
          }
    
          ngAfterContentChecked() {
    
          }
      }
    

Package Creation

  • Get latest source:

      git clone git@git.chathamfinancial.com:frontend/ng4-vscode-snippets.git
    
  • Install VSCode Extension Manager if you don't have it yet:

      npm install -g vsce
    
  • In the source root run the following command:

      vsce package
    
  • Finally install it via the supplied command:

      code --install-extension extension.vsix
    

Extension Installation

  1. Install Visual Studio Code 1.5.0 or higher
  2. Launch Code
  3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
  4. Select Install Extension
  5. Choose the 'Chatham NG4 Snippets' extension
  6. Reload Visual Studio Code

Imgur Image

Known Issues

  • One of the extensions in the 'Angular Essentials' Extension may cause the snippets to take longer to be suggested.

Enjoy!

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