navix

import { Platform } from '@angular/cdk/platform';
import { Injectable } from '@angular/core';
import { MemoryStorage } from './memory-storage';

@Injectable({
  providedIn: 'root',
})
export class LocalStorage implements Storage {
  private readonly storage: Storage;

navix

$ npm i prettier prettier-plugin-css-order prettier-plugin-organize-attributes css-declaration-sorter -D

Create .prettierrc file:

{
  "printWidth": 120,
 "tabWidth": 2,

navix

TypeScript Deep Partial Interface

export type DeepPartial<T> = T extends Function ? T : (T extends object ? { [P in keyof T]?: DeepPartial<T[P]>; } : T);

Before typescript@3.1

type DeepPartial = {

navix

Docker image with Angular application

How to build a Docker image that serves Angular application (without Universal).

Build your application to the dist/app directory, then copy it into an image.

Dockerfile

FROM nginx:latest

navix

Typescript advanced built-in types (utility types)

Official documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html

Partial

Make all properties in T optional.

type t = Partial<{a: string; b: number}>;

navix

import { existsSync, mkdirSync } from 'fs';
import { resolve } from 'path';
import { config } from '../config';

export async function processTextToSpeech(ssml: string, filename: string) {
  // Check media dir
  const dirPath = resolve(config.main.storePath);
  if (!existsSync(dirPath)) {
    mkdirSync(dirPath);
  }

navix

Async / Await in 7 seconds

by Wassim Chegham (@manekinekko)

From this awesome animation, originally from this tweet

Callbacks (continuation passing style)

getData( a => {
	getMoreData(a, b => {

navix

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'nl2br',
  standalone: true,
})
export class Nl2brPipe implements PipeTransform {
  transform(text: string): string {
    return Nl2brPipe.replace(text);
  }

navix

Prevent leaving from any page using Router in Angular 7

Angular has CanDeactivate guard, but you have to declare it to each path in the routes configuration.

Valid until angular/angular#11836 will be done.

You can use CanActivateChild guard to prevent leaving from any component with single declaration.

leave-guard.service.ts

navix

Wait for all animations to finish before :leave in Angular 7

Including child components.

@Component({
  ...
  animations: [
    trigger('host', [
 transition(':enter, :leave', [