realtomaszkula

export interface Theme {
  primary: string;
  accent: string;
}

realtomaszkula

interface Theme {
  primary: string;
  accent: string;
}

@Component({
  selector: 'app-root',
  template: `<app-card></app-card>`,
})
export class AppComponent {

realtomaszkula

@Component({
  selector: 'app-root',
  template: `
  <app-card [style]="style"></app-card>
  `,
})
export class AppComponent {
  get style() {
    return this.sanitizer.bypassSecurityTrustStyle(
      `--primary: lightblue; --accent: crimson`

realtomaszkula

@Component({
  selector: 'app-root',
  template: `
  <app-card></app-card>
`,
styles: [`
  app-card {
    --primary: lightblue;
    --accent: crimson;
  }

realtomaszkula

@Component({
  selector: 'app-root',
  template: `
  <app-card style="--primary: lightblue; --accent: crimson"></app-card>
`,
})
export class AppComponent {}

realtomaszkula

@Component({
  selector: 'app-card',
  template: `
  <header></header>
  <main>
    <section class="top"></section>
    <button class="fab">+</button>
    <section class="bottom"></section>
  </main>
  `,

realtomaszkula

@Component({
  selector: 'app-card',
  template: `
  <header></header>
  <main>
    <section class="top"></section>
    <button class="fab">+</button>
    <section class="bottom"></section>
  </main>
  `,

realtomaszkula

@Directive({
  selector: 'img[appLazyLoad]'
})
export class LazyLoadDirective implements AfterViewInit {
  // ...
  constructor(private el: ElementRef) {}

  private lazyLoadImage() {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(({ isIntersecting }) => {

realtomaszkula

@Directive({
  selector: 'img[appLazyLoad]'
})
export class LazyLoadDirective implements AfterViewInit {
  @HostBinding('attr.src') srcAttr = null;
  @Input() src: string;

  ngAfterViewInit() {
    this.canLazyLoad() ? this.lazyLoadImage() : this.loadImage();
  }

realtomaszkula

@Directive({
  selector: 'img[appLazyLoad]'
})
export class LazyLoadDirective implements AfterViewInit {
  @HostBinding('attr.src') srcAttr = null;
  @Input() src: string;
  
  private loadImage() {
    this.srcAttr = this.src;
  }