Instantly share code, notes, and snippets.

View readme.md

Dynamic imports in Angular 7

Some big pieces of code you can load dynamically.

Update your tsconfig.json:

{
  ...
  "compilerOptions": {
View readme.md

Add ControlValueAccessor to component in Angular 7

ControlValueAccessor allows your component interacts with ngModel.

Let's create a custom quantity input.

Add NG_VALUE_ACCESSOR provider that points to component itself and implement ControlValueAccessor interface:

import { Component, forwardRef } from '@angular/core';
View content.md

Custom EventManagerPlugin for Angular 7

In Angular we can extend the events binding syntax. Let's add posibility to log an event before firing a handler.

Create custom event plugin:

import { Injectable } from '@angular/core';
import { EventManager, ɵgetDOM as getDOM } from '@angular/platform-browser';
View content.md

Component with popup using Angular CDK Overlay

Template:

<ng-template #templateRef>
  Popup content
</ng-template>
View content.md
View readme.md

Image resizing in browser

Resize image using canvas:

function resizeImage (src, resultWidth, resultHeight): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    let canvas = document.createElement('canvas');
    let img = document.createElement('img');
    img.onload = function () {
View readme.md

RxJS: finalCheck operator

Operator that will be runned on stream completition and throw error if callback return something.

Reason: finalize operator cannot pass error to a stream.

const finalCheck = (checkFn: () => any) => <T>(source: Observable<T>) =>
  new Observable<T>(observer => {
    return source.subscribe({
View service.ts
import { Injectable, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { timer } from 'rxjs/observable/timer';
import { shareReplay, switchMap, map } from 'rxjs/operators';
export interface Joke {
id: number;
joke: string;
categories: Array<string>;
View Jasmine Style Guide.md
View Angular Universal (Webpack bundle + Docker deploy).md

Angular Universal (Webpack bundle + Docker deploy)

Tested with angular@5.

Install deps

npm i @angular/platform-server @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader express @types/express ts-loader@3 rimraf --save-dev

Update src/app/app.module.ts