Levent Arman Özak armanozak

Development Expert @SAP, Angular GDE, founder @ng-turkey, ex-team member @abpframework, JavaScript expert, trainer, and blogger

armanozak / post-viewer.component.ts

Last active April 15, 2021 06:46

[Angular Reactivity Streamlined] Triggering change detection when an observable emits a new value in Angular #blog #angular #rxjs

	import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from "@angular/core";
	import { ActivatedRoute } from "@angular/router";
	import { Subscription } from "rxjs";
	import { map, withLatestFrom } from "rxjs/operators";

	@Component({
	template: `
	<div class="posts">
	<app-nav icon="prev" [link]="prev" [disabled]="!prev"></app-nav>

armanozak / post-viewer.component.ts

Created April 15, 2021 07:50

[Angular Reactivity Streamlined] Using ng-observe to observe and react to emitted values #blog #angular #rxjs

	import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
	import { ActivatedRoute } from "@angular/router";
	import { OBSERVE, Observed, ObserveFn, OBSERVE_PROVIDER } from "ng-observe";
	import { map } from "rxjs/operators";

	@Component({
	template: `
	<div class="posts">
	<app-nav icon="prev" [link]="prev" [disabled]="!prev"></app-nav>

armanozak / post-viewer.component.ts

Last active April 15, 2021 13:39

[Angular Reactivity Streamlined] Using ng-observe to observe a collection of emitted values #blog #angular #rxjs

	import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
	import { ActivatedRoute } from "@angular/router";
	import { OBSERVE, ObserveFn, OBSERVE_PROVIDER, toValue } from "ng-observe";
	import { map } from "rxjs/operators";

	@Component({
	template: `
	<div class="posts">
	<app-nav icon="prev" [link]="prev" [disabled]="!prev"></app-nav>

armanozak / post-viewer.component.ts

Last active April 19, 2021 09:51

[Angular Reactivity Streamlined] Mapping reactive collections to reactive values with ng-observe #blog #angular #rxjs

	import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
	import { ActivatedRoute } from "@angular/router";
	import { OBSERVE, Observed, ObserveFn, OBSERVE_PROVIDER, toMappedValue } from "ng-observe";
	import { map } from "rxjs/operators";

	@Component({
	template: `
	<div class="posts">
	<app-nav icon="prev" [link]="prev.value" [disabled]="!prev.value"></app-nav>

armanozak / rxjs-7_n-parameters.ts

Created May 3, 2021 08:45

[What's New in RxJS 7] Better types in functions that take n parameters #blog #rxjs

	import { of } from "rxjs";

	// Observable<string, number> (in RxJS 6 → No overload matches this call)
	of(0, "A", 1, "B", 2, "C", 3, "D", 4, "E", 5, "F", 6, "G", 7, "H", 8, "I", 9, "...");

armanozak / rxjs-7_groupBy-key.ts

Created May 3, 2021 08:46

[What's New in RxJS 7] Better types in groups created by groupBy #blog #rxjs

	import { of } from "rxjs";
	import { groupBy, map, mergeMap } from "rxjs/operators";

	// Observable<string, number>
	of(0, "A", 1, "B", 2, "C", 3, "D", 4, "E", 5, "F", 6, "G", 7, "H", 8, "I", 9, "...")
	.pipe(
	groupBy((x): x is number => typeof x === "number"),
	mergeMap(group$ => (group$.key === true ? group$.pipe(map(String)) : group$))
	)
	.subscribe();

armanozak / rxjs-7_filter_Boolean.ts

Created May 3, 2021 08:47

[What's New in RxJS 7] Better types with filter(Boolean) #blog #rxjs

	import { of } from "rxjs";
	import { filter } from "rxjs/operators";

	// Observable<"" \| 0 \| null \| undefined \| Date>
	of("" as const, 0 as const, null, undefined, new Date())
	.pipe(filter(Boolean))
	.subscribe();
	// Observable<Date> (in RxJS 6 → Observable<unknown>)

armanozak / rxjs-7_Subject-next.ts

Created May 3, 2021 08:48

[What's New in RxJS 7] Better types in Subject next #blog #rxjs

	import { Subject } from "rxjs";

	const number$ = new Subject<number>();
	number$.next();

	// Error: An argument for 'value' was not provided.
	// in RxJS 6 → No error

armanozak / rxjs-7_memory-consumption.ts

Created May 3, 2021 08:50

[What's New in RxJS 7] Less memory consumption in higher-order observables #blog #rxjs

	import { of } from "rxjs";
	import { map, concatAll } from "rxjs/operators";

	of(1, 2, 3)
	.pipe(
	map(id =>
	fromFetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
	selector: resp => resp.json()
	})
	),

armanozak / rxjs-6_toPromise.ts

Created May 3, 2021 08:51

[What's New in RxJS 7] RxJS 6 toPromise #blog #rxjs

	import { interval } from "rxjs";
	import { map, take } from "rxjs/operators";

	const count1To5$ = interval(1000).pipe(
	take(5),
	map(i => i + 1)
	);

	count1To5$.toPromise().then(console.log);
	// (after ~5s) 5