realtomaszkula

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(10),
  map(() => window.pageYOffset),
  pairwise(),
  map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)),
  distinctUntilChanged(),
  share()
);

const scrollUp$ = scroll$.pipe(

realtomaszkula

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(10),
  map(() => window.pageYOffset),
  pairwise(),
  map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)),
  distinctUntilChanged(),
);

realtomaszkula

enum Direction {
  Up = 'Up',
  Down = 'Down'
}

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(10),
  map(() => window.pageYOffset),
  pairwise(),
  map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)),

realtomaszkula

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(10),
  map(() => window.pageYOffset),
);

realtomaszkula

@Component({
  selector: 'app-sticky-header',
  template: `<ng-content></ng-content>`,
  styles: [
    `
      :host {
        position: fixed;
        top: 0;
        width: 100%;
      }

realtomaszkula

enum VisibilityState {
  Visible = 'visible',
  Hidden = 'hidden'
}

enum Direction {
  Up = 'Up',
  Down = 'Down'
}

realtomaszkula

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

@Component({
  selector: 'app-root',
  template: `
  <app-card></app-card>
  

realtomaszkula

@Component({
  selector: 'app-root',
  template: `
  <app-card></app-card>
  
  <button (click)="theme = indigoPinkTheme">Indigo Pink</button>
  <button (click)="theme = pinkBlueGrayTheme">Pink BlueGray</button>
  <button (click)="theme = deepPurpleAmberTheme">Deep Purple Amber</button>
  <button (click)="theme = randomTheme()">?</button>
  `,

realtomaszkula

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

  randomTheme(): Theme {
    const primary = this.randomHex();
    const accent = this.randomHex();

realtomaszkula

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

  @HostBinding('style')
  get style() {
    return this.sanitizer.bypassSecurityTrustStyle(