Netanel Basal NetanelBasal

🎯

Focusing

A FrontEnd Tech Lead, blogger, and open source maintainer. The founder of ngneat, husband and father.

NetanelBasal / react-store.ts

Created August 27, 2022 18:32

	export class Store<State extends Record<string, any>> {
	private subscribers = new Set<Subscriber<State>>();

	constructor(private state: State) { }

	getValue() {
	return this.state;
	}

	setValue(newState: State \| ((state: State) => State)) {

NetanelBasal / listbox-1.html

Last active August 22, 2022 14:14

	<div>
	<h5>Courses</h5>

	<ul cdkListbox>
	<li cdkOption="angular">Angular</li>
	<li cdkOption="react">React</li>
	<li cdkOption="solid">Solid</li>
	</ul>

	</div>

NetanelBasal / NgOptimizedImage-5.ts

Created August 18, 2022 07:48

	import { ImageLoaderConfig, IMAGE_LOADER, NgOptimizedImage } from '@angular/common';

	@NgModule({
	providers: [{
	provide: IMAGE_LOADER,
	useValue: (config: ImageLoaderConfig) => {
	return `https://example.com/images?src=${config.src}&width=${config.width}` }
	}
	],
	bootstrap: [AppComponent]

NetanelBasal / NgOptimizedImage-3.ts

Created August 18, 2022 07:47

	import { NgOptimizedImage, provideImgixLoader } from '@angular/common';

	NgModule({
	providers: [
	provideImgixLoader("https://my.base.url/", {
	ensurePreconnect: boolean
	})
	],
	bootstrap: [AppComponent]
	})

NetanelBasal / NgOptimizedImage-2.html

Created August 18, 2022 07:31

	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>MyNgApp</title>
	<base href="/">
	<!-- 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 -->
	<link rel="preconnect" href="https://picsum.photos">
	<meta name="viewport" content="width=device-width, initial-scale=1">

NetanelBasal / NgOptimizedImage-1.ts

Created August 18, 2022 07:28

	import { NgOptimizedImage } from '@angular/common';

	@Component({
	standalone: true,
	imports: [NgOptimizedImage],
	template: `
	<!-- above the fold -->
	<img rawSrc="https://picsum.photos/200/300" width="200" height="300" priority />

	<!-- below the fold -->

NetanelBasal / provideRouterForTesting.ts

Created August 16, 2022 06:28

	beforeEach(() => {
	TestBed.configureTestingModule({
	providers: [
	provideRouterForTesting(
	testRoutes,
	withDebugTracing(),
	withRouterConfig({ paramsInheritanceStrategy: 'always' })
	),
	],
	});

NetanelBasal / provideRouter.ts

Created August 16, 2022 06:23

	import { provideRouter, withDebugTracing, withPreloading, ... } from '@angular/router';

	bootstrapApplication(AppComponent, {
	providers: [
	provideRouter(
	appRoutes,
	withDebugTracing(),
	withInMemoryScrolling(options?)
	withDisabledInitialNavigation(),
	withEnabledBlockingInitialNavigation(),

NetanelBasal / RouterModule-forroot.ts

Created August 16, 2022 06:18

	RouterModule.forRoot(appRoutes, {
	enableTracing: true,
	preloadingStrategy: Strategy,
	...
	})

NetanelBasal / keyboard-events-4.html

Created August 10, 2022 06:45

	<input (keydown.shift.k)="onKeydown($event)" />
	<input (keydown.k)="onKeydown($event)" />
	<input (keydown.code.keyk)="onKeydown($event)" />
	<input (keydown.code.shift.alt.Period)="onKeydown($event)" />
	<input (keydown.meta.k)="onKeydown($event)" />