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

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

Create .prettierrc file:

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

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

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

Bind ngModel controls to ngForm from parent component

This allows you to split a template-driven form on components.

Create formProvider directive to proxy ngModel injector from parent to child:

import { Directive, SkipSelf, forwardRef } from '@angular/core';
import { ControlContainer, Form } from '@angular/forms';

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

Add nodes just after a component (not inside) in Angular 7

For example we have radio-input and want to create a custom view. But no elements allowed inside input element.

<label>
  <input type="radio" uiRadio ...>
  Option A
</label>

navix

Import JSON into Angular 7 during build

typings.d.ts

declare module '*.json' {
  const value: any;
  export default value;
}

navix

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

Including child components.

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

navix

Proxy in Angular CLI 7

For example proxy GraphQL requests from the default Angular CLI port to your API server.

localhost:4200/graphql -> localhost:3000/graphql

proxy.conf.json