This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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))); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Header and Row Declarations --> | |
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns$.value"></tr> | |
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns$.value"></tr> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
currentPage$ = new BehaviorSubject<number>(1); | |
pageSize$ = new BehaviorSubject<number>(5); | |
dataOnPage$ = new BehaviorSubject<any[]>([]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> | |
<!-- ... -> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) => { |