ZackDeRose’s gists

ZackDeRose / snippet.pagination.table.component.html

Created July 18, 2018 03:32

Pagination template snippet for "Angular CDK Tables" article

	<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 / snippet.data-on-page.table.component.ts

Created July 18, 2018 03:29

Data on Page initialization for "Angular CDK Tables" article

	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 / snippet.new-subject.table.component.ts

Created July 18, 2018 03:25

New BehaviorSubjects for "Angular CDK Tables" article

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

ZackDeRose / app.module.ts

Created July 18, 2018 03:22

App module for ng-bootstrap for "Angular CDK Tables"

	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 / snippet.upgraded-level-up.table.component.ts

Created July 17, 2018 01:33

Snippet of upgraded levelUp() for "Angular CDK Tables"

	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 / snippet.conditional-classes.table.html

Created July 17, 2018 01:25

Snippet for conditional classes for "Angular CDK Tables" article

	<!-- 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 / snippet.superlatives.table.component.ts

Created July 17, 2018 01:19

Snippet of creating superlatives dictionary for "Angular CDK Tables"

	ngOnInit() {
	this.heroes$.subscribe(changedHeroData => {
	this.tableDataSource$.next(Object.values(changedHeroData));

	const superlatives = {
	'highest-attack': null,
	'lowest-attack': null,
	'highest-defense': null,
	'lowest-defense': null,
	'highest-speed': null,

ZackDeRose / index.html

Created July 17, 2018 00:38

Snippet of adding bootstrap cdk for "Angular CDK Tables"

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>SimpleTable</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link rel="stylesheet"

ZackDeRose / snippet.level-up.table.component.ts

Created July 17, 2018 00:02

Snippet for initial Level Up Logic for "AngularCDK Tables" article

	levelUp(heroName: string) {
	const updatedHero = { ... this.heroes$.value[heroName] };
	updatedHero.attack++;
	updatedHero.defense++;
	updatedHero.speed++;
	updatedHero.recovery++;
	updatedHero.healing++;
	updatedHero.health++;

	const newHeroData = { ... this.heroes$.value };

ZackDeRose / snippet.init-table-data-source.table.component.ts

Created July 16, 2018 23:59

Snippet for Initializing tableDataSource$ for "Angular CDK Tables" article

	ngOnInit() {
	this.heroes$.subscribe(changedHeroData => {
	this.tableDataSource$.next(Object.values(changedHeroData));
	});
	}

Zachary DeRose ZackDeRose