Gbuomprisco

// in a real app could be environment.useMocks ?
const useMocks = true;

@NgModule({
  imports: [BrowserModule, CommonModule],
  declarations: [AppComponent, CryptoSelectorComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: PriceApiService,

Gbuomprisco

const WEB_SOCKET_ENDPOINT = 'wss://ws.coincap.io/prices/';

@Injectable()
export class PriceApiService implements PriceApi {
  private webSocket: WebSocket;

  public getPrice(currency: string): Observable<string> {
    return this.connectToPriceStream(currency);
  }

Gbuomprisco

const BASE_PRICES = {
  bitcoin: 11000,
  litecoin: 130,
  ethereum: 300
};

const randomize = (price: number) => {
  return (Math.random() * 2) + price;
};

Gbuomprisco

import { Observable } from 'rxjs';

export interface PriceApi {
  getPrice(currency: string): Observable<string>;
  unsubscribe(): void;
}

Gbuomprisco

<div class="price-container">
    <div class="price"
         *ngIf="(price$ | async) as price; else showEmptyState"
         [ngClass]="{
            'trend-up': (trend$ | async) === trends.Up,
            'trend-down': (trend$ | async) === trends.Down
         }"
    >
        ${{ price }}
    </div>

Gbuomprisco

@Component({
    selector: 'cf-asset-pricer',
    templateUrl: './asset-pricer.component.html',
    styleUrls: ['./asset-pricer.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssetPricerComponent implements OnInit {
    @Input()
    public asset: string;

Gbuomprisco

<mat-form-field>
    <mat-label>
        Select Asset
    </mat-label>

    <mat-select (selectionChange)="assetSelected.next($event.value)">
        <mat-option *ngFor="let asset of (assets$ | async)" [value]="asset.id">
            {{ asset.name }}
        </mat-option>
    </mat-select>

Gbuomprisco

@Component({
    selector: 'cf-asset-selector',
    templateUrl: './asset-selector.component.html',
    styleUrls: ['./asset-selector.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssetSelectorComponent {
    @Output() assetSelected = new EventEmitter<string>();

    public assets$ = this.assetsFacade.assets$;

Gbuomprisco

@Injectable()
export class PricesFacadeServiceImpl implements PricesFacadeService {
    subscribedAssets$: Observable<string[]> = this.store.select(
        selectSubscribedAssets
    );

    constructor(private store: Store<EntityState<PriceState>>) {}

    public createPriceSubscription(assetId: string) {
        this.addInitialPrice(assetId);

Gbuomprisco

<div [ngSwitch]="tile.assetId" fxLayout="column">
    <div class="tile-header">
        <div class="tile-heading" *ngSwitchDefault>
            {{ tile.assetId | titlecase }}
        </div>

        <cf-asset-selector
            *ngSwitchCase="undefined"
            (assetSelected)="updateTile($event)"
        ></cf-asset-selector>