D-Net

import {Component, OnInit} from "@angular/core";

import {UsageStatsService} from "../services/usage-stats.service";

import {UsageStat} from "../entities/usage-stat";

import {countries} from "../services/countries";

import {FormControl} from "@angular/forms";

import {Observable} from "rxjs";

import {map, startWith} from "rxjs/operators";

import {ActivatedRoute} from "@angular/router";

@Component({

  selector: 'home',

  templateUrl: 'home.component.html',

  styleUrls: ['home.component.css'],

})

export class HomeComponent implements OnInit{

  public stats: UsageStat[] = [];

  public countryFb: FormControl = new FormControl();

  public countries: Observable<string[]>;

  public country: String;

  public display: UsageStat;

  public initSlide: number = 1;

  constructor(private usageStatsService: UsageStatsService,

              private route: ActivatedRoute) {}

  ngOnInit() {

    this.route.queryParams.subscribe(params => {

      if(params['slide']) {

        this.initSlide = params['slide'];

      }

    });

    this.usageStatsService.getUsageStats().subscribe(stats => {

      this.stats = stats;

      this.search();

    });

    this.countries = this.countryFb.valueChanges

      .pipe(

        startWith(''),

        map(value => this._filter(value))

      );

  }

  public search() {

    this.country = this.countryFb.value;

    this.display = this.stats.filter(stat => !this.country || stat.country === this.country)[0];

  }

  private _filter(value: string): string[] {

    const filterValue = value.toLowerCase();

    return countries.map(value => value.name).filter(option => option.toLowerCase().includes(filterValue));

  }

}