realtomaszkula

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

type Label<T extends object> = { [key in keyof T]: string };
type PartialLabel<T extends object> = { [key in keyof Partial<T>]: string };

interface LoginForm {
  username: string;
  password: string;
}

realtomaszkula

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

type Label<T extends object> = { [key in keyof T]: string };

interface LoginForm {
  username: string;
  password: string;
}

@Component({

realtomaszkula

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

interface LoginForm {
  username: string;
  password: string;
}

@Component({
  selector: 'app-form',
  template: `

realtomaszkula

<app-progressive-image [width]="width" [height]="height" >
  <img appProgressiveImage [src]="src" />
  <div appProgressiveImagePlaceholder>Loading...</div>
  <div appProgressiveImageFallback>Error!</div>
</app-progressive-image>

realtomaszkula

@Component({
  selector: 'app-progressive-image',
  template: `<ng-content></ng-content>`,
})
export class ProgressiveImageComponent  {
  @Input() height: number;
  @Input() width: number;
}

realtomaszkula

@Directive({
  selector: 'img[appProgressiveImage]',
})
export class ProgressiveImageDirective {
  @Input() src: string;
  width: number;
  height: number;
}

@Directive({

realtomaszkula

@Directive({
  selector: 'img[appProgressiveImage]',
})
export class ProgressiveImageDirective {
  @HostBinding('attr.src')
  @Input() src: string;
  
  @HostBinding('style.width.px')
  width: number;

realtomaszkula

@Component({
  selector: 'app-progressive-image',
  template: `<ng-content></ng-content>`,
})
export class ProgressiveImageComponent implements AfterContentChecked {
  @ContentChild(ProgressiveImageDirective) image: ProgressiveImageDirective;
  @ContentChild(ProgressiveImageFallbackDirective)
  fallback: ProgressiveImageFallbackDirective;
  @ContentChild(ProgressiveImagePlaceholderDirective)
  placeholder: ProgressiveImagePlaceholderDirective;

realtomaszkula

@Component({
  selector: 'app-progressive-image',
  template: `<ng-content></ng-content>`
})
export class ProgressiveImageComponent implements AfterContentChecked {
  @ContentChildren(Dimensions) dirs: QueryList<Dimensions>;

  @HostBinding('style.height.px')
  @Input()
  height: number;

realtomaszkula

abstract class Dimensions {
  width: number;
  height: number;
}