Angular 20

.nvmrc

@@ -1 +1 @@
-v20.11.1
+lts/jod

README.md

@@ -20,6 +20,7 @@ Shows the mapping between the angular version and our lib versions.
 
 | Angular Version | Lib Version                   |
 |-----------------|-------------------------------|
+| `^20`           | `^11`                         |
 | `^19`           | `^7 \|\| ^8 \|\| ^9 \|\| ^10` | 
 | `^18`           | `^6`                          | 
 | `^17`           | `^5`                          |

angular.json

@@ -138,17 +138,33 @@
       "displayBlock": true,
       "changeDetection": "OnPush",
       "viewEncapsulation": "None",
-      "skipTests": true
+      "skipTests": true,
+      "type": "component"
     },
     "@schematics/angular:directive": {
       "prefix": "sc",
-      "skipTests": true
+      "skipTests": true,
+      "type": "directive"
     },
     "@schematics/angular:pipe": {
-      "skipTests": true
+      "skipTests": true,
+      "typeSeparator": "."
     },
     "@schematics/angular:service": {
-      "skipTests": true
+      "skipTests": true,
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

apps/styleguide/src/app/app.component.ts

@@ -18,7 +18,9 @@ export class AppComponent {
 
   private readonly logger: Logger = inject(LoggerService).getInstance('AppComponent')
 
-  constructor(clientIdService: ClientIdService) {
+  constructor() {
+    const clientIdService = inject(ClientIdService)
+
     this.logger.debug('constructor()')
     this.logger.debug('clientId', clientIdService.clientId)
   }

apps/styleguide/src/routes/sg-button/sg-button.component.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Inject, OnDestroy, Optional } from '@angular/core'
+import { ChangeDetectionStrategy, Component, OnDestroy, DOCUMENT, inject } from '@angular/core'
 import { ButtonComponent } from '@shiftcode/ngx-components'
 
 @Component({
@@ -18,11 +17,10 @@ export class SgButtonComponent implements OnDestroy {
 
   isToggled = false
 
-  private document?: Document
+  private readonly document = inject(DOCUMENT, { optional: true })
   private intervalId: any
 
-  constructor(@Optional() @Inject(DOCUMENT) document?: any) {
-    this.document = document
+  constructor() {
     this.intervalId = setInterval(this.updateActiveEl, 100)
   }
 
@@ -32,9 +30,7 @@ export class SgButtonComponent implements OnDestroy {
 
   private updateActiveEl = (): string | null => {
     return (this.activeEl =
-      (this.document &&
-        this.document.activeElement &&
-        `${this.document.activeElement.tagName}#${this.document.activeElement.id}`) ||
+      (this.document?.activeElement && `${this.document.activeElement.tagName}#${this.document.activeElement.id}`) ||
       null)
   }
 }

apps/styleguide/src/routes/sg-tooltip/sg-tooltip.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, Inject, Optional } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { TOOLTIP_DEFAULT_OPTIONS, TooltipDirective, TooltipOptions, TooltipPosition } from '@shiftcode/ngx-components'
 import { LoggerService } from '@shiftcode/ngx-core'
@@ -30,7 +30,9 @@ export class SgTooltipComponent {
   readonly positionCtrl = new FormControl<TooltipPosition>(this.tooltipPositions[0], { nonNullable: true })
   private readonly logger = inject(LoggerService).getInstance('SgTooltipComponent')
 
-  constructor(@Optional() @Inject(TOOLTIP_DEFAULT_OPTIONS) opts: TooltipOptions) {
+  constructor() {
+    const opts = inject<TooltipOptions>(TOOLTIP_DEFAULT_OPTIONS, { optional: true })
+
     this.logger.debug('tooltipDefaultOptions', opts)
   }
 }

apps/styleguide/tsconfig.app.json

@@ -2,9 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": [
-      "../../ng-dev-mode"
-    ]
   },
   "files": [
     "src/main.ts"

libs/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiftcode/ngx-components",
-  "version": "10.0.0",
+  "version": "11.0.0-pr50.4",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <team@shiftcode.ch>",
@@ -18,14 +18,14 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "@angular/animations": "^19.0.0",
-    "@angular/cdk": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/router": "^19.0.0",
+    "@angular/animations": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/router": "^20.0.0",
     "@shiftcode/logger": "^3.0.0",
-    "@shiftcode/ngx-core": "^9.0.0 || ^10.0.0 || ^10.0.0-pr48",
+    "@shiftcode/ngx-core": "^11.0.0 || ^11.0.0-pr50",
     "rxjs": "^6.5.3 || ^7.4.0"
   }
 }

libs/components/src/lib/auto-focus/auto-focus.directive.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common'
-import { AfterViewInit, Directive, ElementRef, inject } from '@angular/core'
+import { AfterViewInit, Directive, ElementRef, inject, DOCUMENT } from '@angular/core'
 import { isInputElement, LoggerService } from '@shiftcode/ngx-core'
 import { Logger } from '@shiftcode/logger'
 

libs/components/src/lib/click-outside/click-outside.directive.ts

@@ -13,8 +13,7 @@ export class ClickOutsideDirective implements OnDestroy, OnChanges {
 
   private subscription?: Subscription
   private readonly element: HTMLElement = inject(ElementRef).nativeElement
-
-  constructor(private uiEventService: UIEventService) {}
+  private readonly uiEventService = inject(UIEventService)
 
   ngOnChanges(): void {
     // as there is only one input, ngOnChanges is only called when `isActive` changes

libs/components/src/lib/flying-focus/flying-focus.component.ts

@@ -1,4 +1,4 @@
-import { DOCUMENT, isPlatformServer } from '@angular/common'
+import { isPlatformServer } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -7,6 +7,7 @@ import {
   inject,
   OnInit,
   PLATFORM_ID,
+  DOCUMENT,
 } from '@angular/core'
 import { WindowRef } from '@shiftcode/ngx-core'
 import { fromEvent } from 'rxjs'

libs/components/src/lib/insert-view-ref/insert-view-ref.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, ViewContainerRef, ViewRef } from '@angular/core'
+import { Directive, Input, ViewContainerRef, ViewRef, inject } from '@angular/core'
 
 /**
  * Directive to insert a viewRef to the template.
@@ -15,6 +15,8 @@ import { Directive, Input, ViewContainerRef, ViewRef } from '@angular/core'
  */
 @Directive({ selector: '[scInsertViewRef]', standalone: true })
 export class InsertViewRefDirective {
+  private readonly container = inject(ViewContainerRef)
+
   @Input()
   set scInsertViewRef(val: ViewRef | null | undefined) {
     this.container.clear()
@@ -27,8 +29,6 @@ export class InsertViewRefDirective {
     return this.container.length > 0
   }
 
-  constructor(private container: ViewContainerRef) {}
-
   /**
    * Inserts a view into the container.
    * @throws when a view is already attached

libs/components/src/lib/navigation-class-handler/navigation-class-handler.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common'
-import { EnvironmentProviders, makeEnvironmentProviders, inject, provideAppInitializer } from '@angular/core'
+import { EnvironmentProviders, makeEnvironmentProviders, inject, provideAppInitializer, DOCUMENT } from '@angular/core'
 import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router'
 import { delay, filter, switchMap, take, tap } from 'rxjs'
 

libs/components/src/lib/smooth-height/smooth-height.component.ts

@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations'
-import { Component, ElementRef, HostBinding, Input, OnChanges } from '@angular/core'
+import { Component, ElementRef, HostBinding, Input, OnChanges, inject } from '@angular/core'
 
 /**
  * Standalone Component to smoothly animate height changes.
@@ -25,8 +25,7 @@ export class SmoothHeightComponent implements OnChanges {
   trigger: any
 
   private startHeight: number
-
-  constructor(private element: ElementRef) {}
+  private readonly element = inject(ElementRef)
 
   @HostBinding('@grow')
   get grow() {

libs/components/src/lib/svg-animate/svg-animate.directive.ts

@@ -1,5 +1,5 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'
-import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnInit } from '@angular/core'
+import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnInit, inject } from '@angular/core'
 
 /**
  * Standalone Directive to animate SVG parts by calling beginElement method
@@ -34,13 +34,9 @@ export class SvgAnimateDirective implements OnChanges, AfterViewInit, OnInit {
     return this._withInitAnimation
   }
 
-  readonly element: HTMLElement
+  readonly element = inject(ElementRef).nativeElement
   private _withInitAnimation = false
 
-  constructor(elementRef: ElementRef<HTMLElement>) {
-    this.element = elementRef.nativeElement
-  }
-
   ngOnInit() {
     if (!this.withInitAnimation) {
       // set initial state without animation

libs/components/src/lib/svg/svg-registry.service.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common'
 import { HttpClient, HttpErrorResponse } from '@angular/common/http'
-import { inject, Injectable } from '@angular/core'
+import { inject, Injectable, DOCUMENT } from '@angular/core'
 import { firstValueFrom } from 'rxjs'
 
 /**
@@ -10,6 +9,7 @@ import { firstValueFrom } from 'rxjs'
 export class SvgRegistry {
   private readonly cache = new Map<string, Promise<SVGElement>>()
   private readonly document = inject(DOCUMENT)
+  private readonly httpClient = inject(HttpClient)
 
   /**
    * Creates a DOM element from the given SVG string, and adds default attributes.
@@ -40,8 +40,6 @@ export class SvgRegistry {
     return svg
   }
 
-  constructor(private httpClient: HttpClient) {}
-
   /**
    * Returns a Promise that produces the icon (as an <svg> DOM element) from the given URL.
    * The response from the URL may be cached so this will not always cause an HTTP request, but

libs/components/src/lib/textarea-autosize/textarea-autosize.directive.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, ElementRef, HostBinding, inject, Inject, Input, OnDestroy } from '@angular/core'
+import { AfterViewInit, Directive, ElementRef, HostBinding, inject, Input, OnDestroy } from '@angular/core'
 import { FormControlDirective } from '@angular/forms'
 import { LoggerService, ResizeService } from '@shiftcode/ngx-core'
 import { Logger } from '@shiftcode/logger'
@@ -24,14 +24,12 @@ export class TextareaAutosizeDirective implements AfterViewInit, OnDestroy {
 
   readonly element: HTMLTextAreaElement = inject(ElementRef).nativeElement
 
+  private readonly formControlDir = inject(FormControlDirective)
   private readonly logger: Logger = inject(LoggerService).getInstance('TextareaAutosizeDirective')
   private readonly onDestroy = new Subject<void>()
 
-  constructor(
-    resizeService: ResizeService,
-    @Inject(FormControlDirective) private readonly formControlDir: FormControlDirective,
-  ) {
-    resizeService.observe(this.element).pipe(takeUntil(this.onDestroy)).subscribe(this.resize.bind(this))
+  constructor() {
+    inject(ResizeService).observe(this.element).pipe(takeUntil(this.onDestroy)).subscribe(this.resize.bind(this))
   }
 
   ngAfterViewInit() {

libs/components/src/lib/tooltip/tooltip.component.ts

@@ -1,7 +1,15 @@
 import { AnimationEvent, trigger } from '@angular/animations'
 import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay'
 import { NgClass } from '@angular/common'
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  ViewChild,
+  inject,
+} from '@angular/core'
 import { Observable, Subject } from 'rxjs'
 import { TooltipNotchPosition, TooltipPosition, TooltipPositionSimple } from './tooltip-position.type'
 import { TooltipVisibility } from './tooltip-visibility.type'
@@ -75,7 +83,7 @@ export class TooltipComponent implements OnDestroy {
   /** Subject for notifying that the tooltip has been hidden from the view */
   private readonly onHide = new Subject<void>()
 
-  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+  private readonly changeDetectorRef = inject(ChangeDetectorRef)
 
   /**
    * Shows the tooltip with an animation originating from the provided origin