Instantly share code, notes, and snippets.


Dynamic imports in Angular 7

Some big pieces of code you can load dynamically.

Update your tsconfig.json:

  "compilerOptions": {

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';

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';

Component with popup using Angular CDK Overlay


<ng-template #templateRef>
  Popup content

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 () {

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
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