From 0b9a906feec385eece2d7878dc6f18b1eac6fcb2 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 25 Sep 2024 09:09:52 +0200 Subject: [PATCH] refactor: migrate to signal inputs using automated migration (#1270) * refactor: migrate to signal inputs using automated migration Migrates all compatible inputs to signal inputs. --- src/app/pages/component-sidenav/component-nav.html | 2 +- src/app/pages/component-sidenav/component-sidenav.ts | 9 +++++---- src/app/shared/carousel/carousel.ts | 4 ++-- src/app/shared/doc-viewer/doc-viewer.ts | 3 ++- src/app/shared/doc-viewer/header-link.ts | 4 ++-- src/app/shared/example-viewer/code-snippet.html | 2 +- src/app/shared/example-viewer/code-snippet.ts | 6 +++--- src/app/shared/table-of-contents/table-of-contents.ts | 9 +++++---- 8 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/app/pages/component-sidenav/component-nav.html b/src/app/pages/component-sidenav/component-nav.html index 25334a9b3..4de58c659 100644 --- a/src/app/pages/component-sidenav/component-nav.html +++ b/src/app/pages/component-sidenav/component-nav.html @@ -1,5 +1,5 @@
- @if ((params | async)?.section; as section) { + @if ((params() | async)?.section; as section) {
@for (component of docItems.getItems(section); track component) { diff --git a/src/app/pages/component-sidenav/component-sidenav.ts b/src/app/pages/component-sidenav/component-sidenav.ts index 31e095a0e..56a4e7382 100644 --- a/src/app/pages/component-sidenav/component-sidenav.ts +++ b/src/app/pages/component-sidenav/component-sidenav.ts @@ -1,12 +1,13 @@ -import {Component, - Input, +import { + Component, NgModule, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation, - forwardRef + forwardRef, + input } from '@angular/core'; import {animate, state, style, transition, trigger} from '@angular/animations'; import {CdkAccordionModule} from '@angular/cdk/accordion'; @@ -142,7 +143,7 @@ export class ComponentSidenav implements OnInit, OnDestroy { ], }) export class ComponentNav { - @Input() params: Observable | undefined; + readonly params = input>(); currentItemId: string | undefined; constructor(public docItems: DocumentationItems) {} diff --git a/src/app/shared/carousel/carousel.ts b/src/app/shared/carousel/carousel.ts index 3274d2351..383291e1d 100644 --- a/src/app/shared/carousel/carousel.ts +++ b/src/app/shared/carousel/carousel.ts @@ -6,11 +6,11 @@ import { ElementRef, HostBinding, Inject, - Input, Optional, QueryList, ViewChild, ViewEncapsulation, + input } from '@angular/core'; import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes'; @@ -42,7 +42,7 @@ export class CarouselItem implements FocusableOption { imports: [MatButtonModule, MatIconModule], }) export class Carousel implements AfterContentInit { - @Input('aria-label') ariaLabel: string | undefined; + readonly ariaLabel = input(undefined, { alias: 'aria-label' }); @ContentChildren(CarouselItem) items!: QueryList; @ViewChild('list') list!: ElementRef; @HostBinding('class.animations-disabled') readonly animationsDisabled: boolean; diff --git a/src/app/shared/doc-viewer/doc-viewer.ts b/src/app/shared/doc-viewer/doc-viewer.ts index 9b45ca009..8690fad81 100644 --- a/src/app/shared/doc-viewer/doc-viewer.ts +++ b/src/app/shared/doc-viewer/doc-viewer.ts @@ -15,6 +15,7 @@ import { Output, SecurityContext, ViewContainerRef, + input } from '@angular/core'; import {Observable, Subscription} from 'rxjs'; import {shareReplay, take, tap} from 'rxjs/operators'; @@ -46,7 +47,7 @@ export class DocViewer implements OnDestroy { private _portalHosts: DomPortalOutlet[] = []; private _documentFetchSubscription: Subscription | undefined; - @Input() name: string | undefined; + readonly name = input(); /** The URL of the document to display. */ @Input() diff --git a/src/app/shared/doc-viewer/header-link.ts b/src/app/shared/doc-viewer/header-link.ts index ab4f18f5d..011c9a094 100644 --- a/src/app/shared/doc-viewer/header-link.ts +++ b/src/app/shared/doc-viewer/header-link.ts @@ -1,4 +1,4 @@ -import {Component, Input} from '@angular/core'; +import {Component} from '@angular/core'; import {Router} from '@angular/router'; import {MatIconModule} from '@angular/material/icon'; @@ -32,7 +32,7 @@ export class HeaderLink { * Id of the anchor element. Note that is uses "example" because we instantiate the * header link components through the ComponentPortal. */ - @Input() example: string | undefined; + example: string = ''; /** Base URL that is used to build an absolute fragment URL. */ private _baseUrl: string; diff --git a/src/app/shared/example-viewer/code-snippet.html b/src/app/shared/example-viewer/code-snippet.html index 06815db9c..09b547226 100644 --- a/src/app/shared/example-viewer/code-snippet.html +++ b/src/app/shared/example-viewer/code-snippet.html @@ -1,3 +1,3 @@
-
+
diff --git a/src/app/shared/example-viewer/code-snippet.ts b/src/app/shared/example-viewer/code-snippet.ts index bb4f1ad37..a8009fb14 100644 --- a/src/app/shared/example-viewer/code-snippet.ts +++ b/src/app/shared/example-viewer/code-snippet.ts @@ -1,9 +1,9 @@ import { ChangeDetectionStrategy, Component, - Input, ViewChild, - forwardRef + forwardRef, + input } from '@angular/core'; import {DocViewer} from '../doc-viewer/doc-viewer'; @@ -16,6 +16,6 @@ import {DocViewer} from '../doc-viewer/doc-viewer'; imports: [forwardRef(() => DocViewer)] }) export class CodeSnippet { - @Input() source: string | undefined; + readonly source = input(); @ViewChild('viewer') viewer!: DocViewer; } diff --git a/src/app/shared/table-of-contents/table-of-contents.ts b/src/app/shared/table-of-contents/table-of-contents.ts index 59d07b315..9bdc78145 100644 --- a/src/app/shared/table-of-contents/table-of-contents.ts +++ b/src/app/shared/table-of-contents/table-of-contents.ts @@ -3,11 +3,11 @@ import { Component, ElementRef, Inject, - Input, OnDestroy, OnInit, NgZone, ChangeDetectorRef, + input } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {ActivatedRoute, Router} from '@angular/router'; @@ -44,7 +44,7 @@ interface Link { standalone: true }) export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { - @Input() container: string | undefined; + readonly container = input(); _linkSections: LinkSection[] = []; _links: Link[] = []; @@ -87,8 +87,9 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { // to subscribe to its scroll event until next tick (when it does exist). this._ngZone.runOutsideAngular(() => { Promise.resolve().then(() => { - this._scrollContainer = this.container ? - this._document.querySelector(this.container) as HTMLElement : + const container = this.container(); + this._scrollContainer = container ? + this._document.querySelector(container) as HTMLElement : window; if (this._scrollContainer) {