Oleksa Novyk navix

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

Template:

<ng-template #templateRef>
  Popup content
</ng-template>

Ngx-kit ext-select — extended select for Angular

Live demo: https://ngx-kit.com/collection/module/ui-ext-select

Default mode

Filters

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

Jasmine Style Guide

Forked from: https://github.com/CareMessagePlatform/jasmine-styleguide

Purpose

The purpose of this style guide is to offer suggested best practices when writing Jasmine unit tests.

Contributing

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`

Gradient shadow in pure CSS

HTML

<button>Let's Go !</button>

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