VS Code Typescript Angular/Rxjs/NgRx snippets

This extension provides you Typescript and Angular/RxJs snippets in Angular for VS Code

Installation

Visual Studio Marketplace

Launch Quick Open:

Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P

Paste the following command and press Enter:

ext install abelfubu.angular-rxjs-ngrx

GitHub Repository Clone

Change to your .vscode/extensions VS Code extensions directory. Depending on your platform it is located in the following folders:

Linux: ~/.vscode/extensions
macOS: ~/.vscode/extensions
Windows: %USERPROFILE%\.vscode\extensions

Clone the Material Theme repository as abelfubu.angular-rxjs-ngrx:

git clone https://github.com/abelfubu/angular-rxjs-ngrx.git

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

Angular Snippets

Prefix	Method
`ngi→`	`import { Module } from '@angular/folder'`
`ngihcm→`	`import { HttpClientModule } from '@angular/common/http'`
`ngdi→`	`private service: Service`
`ngif→`	`*ngIf="condition"`
`ngfor→`	`*ngFor="let variable of array"`

Constructor

ngcons

constructor(private service: Service) { }

(events)

nge-> ngevent-> ngclick->

(click)="method()"

RouterLink

ngrl->

routerLink="/route"

FormGroup

ngfg-> ngformgroup->

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="control" />
</form>

FormControl

ngfc-> ngformcontrol->

<input type="text" formControlName="control" />

Interface

ngint-> nginterface->

export interface name {
  prop: type;
}

Enum

ngenum->

export enum name {
  prop = value,
}

Class properties

ngp->

name: type;

Method

ngmethod->

name(params): void {

}

FormBuilder

ngmethod->

this.form = fb.group({
  name: ['', Validators.required],
});

Route

ngroute->

{ path: name, component: component },

NgRx

Actions

ngrxaction->

import { createAction, props } from '@ngrx/store';

export const action = createAction(
  '[type] actionName',
  props<{ prop: type }>()
);

Reducer

ngrxreducer->

import { createReducer, on } from '@ngrx/store';

export const initialState = {};

const _typeReducer = createReducer(
  initialState,
  on(action, state => state)
);

export function typeReducer(state, action) {
  return _typeReducer(state, action);
}

AppReducer

ngrxappreducer

import { ActionReducerMap } from '@ngrx/store';
import * as ${1:T} from './$2';

export interface AppState {
  ui: ${1:T}.State;
}

export const appReducers: ActionReducerMap<AppState> = {
  ui: ${1:T}.${3:reducer},
};

// Insert ${4:appReducers} in the app.module imports for StoreModule$0

Angular Material

MatButton

matbutton->

<button mat-raised-button color="accent">
  <mat-icon>menu</mat-icon>
</button>

Autor [Abel de la Fuente -

Profile Github Linkedin

Typescript Angular/RxJs/NgRx Snippets

Abelfubu