e-oz

Use cases for effects

Effects are rarely needed in most application code, but may be useful in specific circumstances. Here are some examples of situations where an effect might be a good solution:

• Logging data being displayed and when it changes, either for analytics or as a debugging tool.
• Keeping data in sync with window.localStorage.
• Adding custom DOM behavior that can't be expressed with template syntax.
• Performing custom rendering to a , charting library, or other third party UI library.

When not to use effects

e-oz

@Component({})
export class BookComponent {
	private readonly bookService = inject(BookService);

	protected readonly $isLoading = signal(false);

	readonly bookId = input.required<string>();

	protected readonly $bookDetails = toSignal(
		toObservable(this.bookId).pipe(

e-oz

"Singletons are Pathological Liars"

August 17th, 2008
by Miško Hevery

------------
source: http://misko.hevery.com/2008/08/17/singletons-are-pathological-liars/
waybackmachine: https://web.archive.org/web/20230208155810/http://misko.hevery.com/2008/08/17/singletons-are-pathological-liars/
------------

e-oz

import { EventEmitter, NgZone } from "@angular/core";
import { Observable, throttle } from "rxjs";

export class NoopNgZone implements NgZone {
  readonly hasPendingMicrotasks = false;
  readonly hasPendingMacrotasks = false;
  readonly isStable = true;
  readonly onUnstable = new EventEmitter<any>();
  readonly onError = new EventEmitter<any>();

e-oz

e-oz

import { Component, signal } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IfHasPermissionDirective } from './if-has-permission.directive';
import { Permission, PermissionsService } from '../permissions.service';

const $allowedPermissions = signal<Permission[]>([]);

class PermissionsServiceMock {
  hasPermission(permission: Permission) {
    return $allowedPermissions().includes(permission);

e-oz

import { inject, TemplateRef, ViewContainerRef } from "@angular/core";

export abstract class StructuralConditionalDirective {
  protected readonly templateRef = inject(TemplateRef<any>);
  protected readonly viewContainer = inject(ViewContainerRef);
  protected elseTemplateRef: TemplateRef<any> | undefined = undefined;
  protected hasView: boolean = false;
  protected hasElseView: boolean = false;
  protected condition: boolean = false;

e-oz

e-oz

import { assertInInjectionContext, DestroyRef, inject, Injector, isDevMode, isSignal, type Signal } from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { isObservable, Observable, of, retry, type RetryConfig, Subject, Subscription } from 'rxjs';

export type CreateEffectOptions = {
  injector?: Injector,
  /**
   * @param retryOnError
   * Set to 'false' to disable retrying on error.
   * Otherwise, generated effect will use `retry()`.

e-oz

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZoneEventCoalescing: true,
  ngZoneRunCoalescing: true,
}).catch((err) => console.error(err));