ZackDeRose

<!-- Hero Name Column -->
<ng-container cdkColumnDef="attack">
  <th cdk-header-cell *cdkHeaderCellDef> Attack </th>
  <td cdk-cell
      *cdkCellDef="let row"
      [ngClass]="{
        'table-success': superlatives$.value['highest-attack'] === row.name,
        'table-danger': superlatives$.value['lowest-attack'] === row.name
      }">
     {{row.attack}}

ZackDeRose

levelUp(heroName: string) {
  const updatedHero = { ... this.heroes$.value[heroName] };
  
  updatedHero.attack = Math.round(updatedHero.attack * (1 + (Math.random() / 8)));
  updatedHero.defense = Math.round(updatedHero.defense * (1 + (Math.random() / 8)));
  updatedHero.speed = Math.round(updatedHero.speed * (1 + (Math.random() / 8)));
  updatedHero.recovery = Math.round(updatedHero.recovery * (1 + (Math.random() / 8)));
  updatedHero.healing = Math.round(updatedHero.healing * (1 + (Math.random() / 8)));
  updatedHero.health = Math.round(updatedHero.health * (1 + (Math.random() / 8)));

ZackDeRose

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TableComponent } from './table/table.component';

import {CdkTableModule} from '@angular/cdk/table';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({

ZackDeRose

currentPage$ = new BehaviorSubject<number>(1);
pageSize$ = new BehaviorSubject<number>(5);
dataOnPage$ = new BehaviorSubject<any[]>([]);

ZackDeRose

combineLatest(this.tableDataSource$, this.currentPage$, this.pageSize$)
.subscribe(([allSources, currentPage, pageSize]) => {
  const startingIndex = (currentPage - 1) * pageSize;
  const onPage = allSources.slice(startingIndex, startingIndex + pageSize);
  this.dataOnPage$.next(onPage);
});

ZackDeRose

<ngb-pagination
  [collectionSize]="tableDataSource$.value.length"
  [pageSize]="pageSize$.value"
  [page]="currentPage$.value"
  (pageChange)="currentPage$.next($event)">
</ngb-pagination>

<table cdk-table [dataSource]="dataOnPage$" class="table table-hover">
  <!-- ... ->

ZackDeRose

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { TableComponent } from './table/table.component';

ZackDeRose

combineLatest(this.heroes$, this.searchFormControl.valueChanges)
.subscribe(([changedHeroData, searchTerm]) => {
  const heroesArray = Object.values(changedHeroData);
  
  if (!searchTerm) {
    this.tableDataSource$.next(heroesArray);
    return;
  }

  const filteredResults = heroesArray.filter(hero => {

ZackDeRose

<div class="row">
  <div class="col-6">
    <div class="form-inline">
      <div class="form-group">
        <div class="input-group mr-3">
          <input
            type="text"
            class="form-control"
            placeholder="Search…"
            [formControl]="searchFormControl">

ZackDeRose

combineLatest(this.heroes$, this.searchFormControl.valueChanges, this.sortKey$, this.sortDirection$)
.subscribe(([changedHeroData, searchTerm, sortKey, sortDirection]) => {
  const heroesArray = Object.values(changedHeroData);
  let filteredHeroes: any[];

  if (!searchTerm) {
    filteredHeroes = heroesArray;
  } else {
    const filteredResults = heroesArray.filter(hero => {
      return Object.values(hero).reduce((prev, curr) => {