armanozak

@Component({
  selector: 'my-app',
  template: `
    <context-provider provide="rate onRating">
      <two-way></two-way>
    </context-provider>

    {{ rate }}
  `,
})

armanozak

@Component({
  selector: 'two-way',
  template: `
    <ng-template
      contextDisposer="rate onRating"
      let-rate="rate"
      let-onRating="onRating"
    >
      <rating
        [ngModel]="rate"

armanozak

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <context-provider provide="rate">
        <two-way></two-way>
      </context-provider>
    </form>

    {{ rate }}

armanozak

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-card-image',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <img [alt]="alt" [src]="src" [ngClass]="classes" (load)="ready = true" />
    <span *ngIf="ready && attribution">
      Image by <a [href]="attribution.href">{{ attribution.text }}</a>
    </span>

armanozak

import {
  ChangeDetectionStrategy,
  Component,
  Input,
  Optional,
} from '@angular/core';
import { CardVerticalComponent } from './card-vertical.component';

@Component({
  selector: 'app-card-image',

armanozak

import { ContentChild, ElementRef, Input } from '@angular/core';
import { CardTitleComponent } from './card-title.component';

export abstract class AbstractCard {
  @Input() action = () => {};

  @Input() color = 'primary';
}

armanozak

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-card-title',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h5 class="card-title">
      <ng-content></ng-content>
    </h5>
  `,

armanozak

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AbstractCard } from './abstract-card';
import { CardHorizontalComponent } from './card-horizontal.component';

@Component({
  selector: 'app-card-button',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button class="btn" [ngClass]="classes" (click)="parent.action()">
      <ng-content></ng-content>

armanozak

// /User/keybindings.json

[
  {
    "key": "shift+alt+t",
    "command": "editor.action.insertSnippet",
    "when": "resourceLangId == typescript && editorTextFocus && !editorReadonly",
    "args": {
      "langId": "typescript",
      "name": "Disable TSLint"

armanozak

// requires TypeScript v3.6+

export { DeepBoolean };

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

declare class DeepBoolean<T = any> {
  constructor(source: T);