Nivrith nivrith

🎸

Recreational Mathemusician

I am a lazy programmer and I ❤️ node

nivrith / repeat-times.directive.ts

Last active June 18, 2022 11:17

Repeat angular template based on a number rather than an iterable

	import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

	export type RepeatTimesContext = {
	$implicit: number;
	index: number;
	}

	@Directive({
	selector: '[repeatTimes]'
	})

nivrith / example.module.ts

Last active May 28, 2022 10:35

Importing NgxTeleportModule in your NgModule

	import { NgxTeleportModule } from 'ngx-teleport';

	@NgModule({
	//...
	imports: [
	//..
	NgxTeleportModule,
	//..
	],
	})

nivrith / ngx-teleport-usage.html

Created May 28, 2022 10:24

	<!--This can be anwhere in your App-->
	<ngx-teleport to="destination">
	<stuff>...</stuff>
	</ngx-teleport>


	<!--This can be anwhere in your App-->
	<ngx-teleport-outlet name="destination">
	</ngx-teleport-outlet>
	<!--content will be rendered here-->

nivrith / async-iteration.ts

Created May 28, 2022 10:03

Async Iteration using for await (...) loop

	(async function () {
	for await (const batch of batchTasks(tasks, 5)) {
	console.log('batch', batch);
	//Do something with the processed batch
	renderPost(batch, appDiv);
	}
	loadingDiv.innerText = 'Loaded';
	})();

nivrith / batch-tasks.ts

Last active May 28, 2022 09:59

Powerful trick to batch promises using Async Generators

	/**
	* A fuction that returns a Promise
	* @typedef {(<T = any>() => Promise<T>)} Task
	*/

	/**
	*
	* @param {Array<Task>} tasks
	*/
	export async function* batchTasks(tasks, limit, taskCallback = (r) => r) {

nivrith / click-double-usage-example.html

Created November 16, 2021 07:54

Bind Single and Double Click events in Angular without bubbling issues

	// In some angular template bind to events `click.single` and `click.double`

	<div (click.single)="onSingleClick($event)" (click.double)="onDoubleClick(event)">
	I got 99 problems but the click ain't one
	</div>

nivrith / click-double.directive.ts

Created November 16, 2021 07:49

Bind Single and Double Click events in Angular without clashing or bubbling issues

	import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
	import { Subject, Subscription } from 'rxjs';
	import { debounceTime } from 'rxjs/operators';

	@Directive({
	selector: '[click.single],[click.double]',
	})
	export class ClickDoubleDirective implements OnInit, OnDestroy {
	@Input() debounceTime = 300;
	@Output('click.double') doubleClick = new EventEmitter();

nivrith / preserve-query-params-path-location-strategy.ts

Last active February 1, 2021 22:34

How to preserve query params globally with angular router

	import { PathLocationStrategy, APP_BASE_HREF, PlatformLocation } from '@angular/common';
	import { Optional, Inject, Injectable } from '@angular/core';
	import { UrlSerializer } from '@angular/router';

	@Injectable()
	export class PreserveQueryParamsPathLocationStrategy extends PathLocationStrategy {
	private get search(): string {
	return this.platformLocation?.search ?? '';
	}
	constructor(

nivrith / merge latest from.ts

Last active December 6, 2020 05:53

Merge Latest From Operator to get latest emission of other source observables

	export type ObservableSourceType<T = any> = Observable<T> \| ((value: any) => Observable<T>);

	function* sourcesGen<T>(sources: ObservableSourceType[], a: T, i: number): Generator<Observable<any>, Observable<any>, undefined> {
	const length = sources.length;
	for (const [index, source] of sources.entries()) {
	const observableSource: Observable<any> = typeof source === 'function' ? source.call(null, [a, i]) : source;
	if (index <= length + 1) {
	yield observableSource;
	} else {
	return observableSource;

nivrith / merge latest from final.ts

Last active December 6, 2020 05:51

Final merge latest from operator

	export type ObservableSourceType<T = any> = Observable<T> \| ((value: any) => Observable<T>);

	function* sourcesGen<T>(sources: ObservableSourceType[], a: T, i: number): Generator<Observable<any>, Observable<any>, undefined> {
	const length = sources.length;
	for (const [index, source] of sources.entries()) {
	const observableSource: Observable<any> = typeof source === 'function' ? source.call(null, [a, i]) : source;
	if (index <= length + 1) {
	yield observableSource;
	} else {
	return observableSource;