e-oz

// If you use some "CSS reset" (Tailwind, Bootstrap, 
// modern-normalize...), then mat-icon inside the
// Angular Material mat-icon-button will not be centered
// correctly - it will be shifted 2 pixels down.
// Here is the fix:
.mdc-icon-button {
  display: flex !important;
  flex-flow: row;
  align-items: center;
}

e-oz

:root, body {
  --mdc-linear-progress-active-indicator-height: 0.25rem;
  --mdc-linear-progress-track-height: 0.25rem;
  --mdc-plain-tooltip-container-shape: 0.25rem;
  --mdc-filled-text-field-focus-active-indicator-height: 0.125rem;
  --mdc-filled-text-field-container-shape: 0.25rem;
  --mdc-outlined-text-field-container-shape: 0.25rem;
  --mat-form-field-container-height: 3.5rem;
  --mat-form-field-container-vertical-padding: 1rem;
  --mat-form-field-filled-with-label-container-padding-top: 1.5rem;

e-oz

// Variables:
// --brand-primary-color
// --brand-secondary-color
// --brand-tertiary-color

// This theme uses system variables:
// Don't forget to use mat.system-level-colors().
// Example:
//
// :root {

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;