LayZeeDK

import { Component, ContentChild } from '@angular/core';
import { map } from 'rxjs/operators';

import { ConnectionService } from './connection.service';
import { FastDirective} from './fast.directive';
import { SlowDirective} from './slow.directive';

@Component({
  selector: 'connection',
  template: `

LayZeeDK

import { Subject } from 'rxjs';

export class SearchPresenter {
  private _searchQuery: Subject<string> = new Subject();

  searchQuery: Observable<string> = this._searchQuery.asObservable();
    
  search(query: string): void {
    this._searchQuery.next(query);
  }

LayZeeDK

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

export class SearchPresenter {
  private _searchQuery: Subject<string> = new Subject();

  searchQuery: Observable<string> = this._searchQuery.pipe(
    debounceTime(150),
    distinctUntilChanged(),
  );

LayZeeDK

src
+---app
|   |---search
|   |   +---app-search-repository.ts
|   |   +---app-search.bloc.ts
|   |   +---index.ts
|   |   +---search.component.css
|   |   +---search.component.html
|   |   +---search.component.ts
|   |   \---search.module.ts

LayZeeDK

import { Injectable } from '@angular/core';
import * as faker from 'faker';
import { of as observableOf } from 'rxjs';
import { delay } from 'rxjs/operators';

import { SearchRepository } from '../../business-logic/search';

@Injectable()
export class AppSearchRepository implements SearchRepository {
  async search(query: string) {

LayZeeDK

import { Injectable, OnDestroy } from '@angular/core';

import { SearchBloc, SearchRepository } from '../../business-logic/search';

@Injectable()
export class AppSearchBloc extends SearchBloc implements OnDestroy {
  constructor(repository: SearchRepository) {
    super(repository);
  }

LayZeeDK

<div cdkTrapFocus [cdkTrapFocusAutoCapture]="false">
  <mat-form-field appearance="outline" style="width: 80%;">
    <input 
      matInput
      placeholder="Search for..." 
      ngModel (ngModelChange)="bloc.query.next($event)">
  </mat-form-field>
</div>

<span> {{ bloc.preamble$ | async }} </span>

LayZeeDK

<div cdkTrapFocus [cdkTrapFocusAutoCapture]="false">
  <mat-form-field appearance="outline" style="width: 80%;">
    <input 
      matInput
      placeholder="Search for..." 
      ngModel (ngModelChange)="search($event)">
  </mat-form-field>
</div>

<span> {{ preamble$ | async }} </span>

LayZeeDK

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

import { Hero } from '../hero';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent {

LayZeeDK

describe('deletes a hero', () => {
  it(`delegates to ${HeroService.name}`, () => {
    const gamora: Hero = femaleMarvelHeroes.find(x => x.name === 'Gamora');

    container.delete(gamora);

    expect(heroServiceStub.deleteHero).toHaveBeenCalledTimes(1);
    expect(heroServiceStub.deleteHero).toHaveBeenCalledWith(gamora);
  });
});