From baf680747da062016cb86c7a3850d7145a63e710 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 2 Oct 2024 14:03:05 +0000 Subject: [PATCH 1/3] refactor: switch to signal queries Runs the signal queries migration in this repository. --- scenes/src/app/scene-viewer/scene-viewer.ts | 9 +++---- .../scenes/autocomplete/autocomplete-scene.ts | 8 +++--- scenes/src/app/scenes/menu/menu-scene.ts | 6 ++--- .../src/app/scenes/ripples/ripples-scene.ts | 10 ++++---- scenes/src/app/scenes/select/select-scene.ts | 6 ++--- .../src/app/scenes/tooltip/tooltip-scene.ts | 6 ++--- .../component-sidenav/component-sidenav.html | 2 +- .../component-sidenav.spec.ts | 4 +-- .../component-sidenav/component-sidenav.ts | 11 ++++---- .../component-viewer/component-viewer.ts | 25 ++++++++++--------- src/app/shared/carousel/carousel.ts | 25 +++++++++---------- src/app/shared/example-viewer/code-snippet.ts | 6 ++--- .../shared/example-viewer/example-viewer.html | 4 +-- .../shared/example-viewer/example-viewer.ts | 8 +++--- 14 files changed, 65 insertions(+), 65 deletions(-) diff --git a/scenes/src/app/scene-viewer/scene-viewer.ts b/scenes/src/app/scene-viewer/scene-viewer.ts index 1e4a952c6..1a591cfc1 100644 --- a/scenes/src/app/scene-viewer/scene-viewer.ts +++ b/scenes/src/app/scene-viewer/scene-viewer.ts @@ -4,9 +4,9 @@ import { HostBinding, Input, OnInit, - ViewChild, ViewContainerRef, - ViewEncapsulation + ViewEncapsulation, + viewChild } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {DomSanitizer, SafeStyle} from '@angular/platform-browser'; @@ -44,8 +44,7 @@ export class SceneViewer implements OnInit { /** Component of scene to display */ @Input() component: any; - @ViewChild('scene', {read: ViewContainerRef, static: true}) - scene!: ViewContainerRef; + readonly scene = viewChild.required('scene', { read: ViewContainerRef }); constructor(private readonly componentFactoryResolver: ComponentFactoryResolver, private route: ActivatedRoute, @@ -57,7 +56,7 @@ export class SceneViewer implements OnInit { ngOnInit() { const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.component); - this.scene.createComponent(componentFactory); + this.scene().createComponent(componentFactory); const container = document.querySelector('#scene-content-container') as HTMLElement; container.style.transform = `scale(${this.scale})`; container.style.transformOrigin = 'center'; diff --git a/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts b/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts index 83d73bbba..ee5f1fa16 100644 --- a/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts +++ b/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts @@ -1,8 +1,8 @@ import { AfterViewInit, Component, - ViewChild, - ViewEncapsulation + ViewEncapsulation, + viewChild } from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -27,10 +27,10 @@ export class AutocompleteScene implements AfterViewInit { myControl = new FormControl(''); options: string[] = ['hello', 'hello world']; - @ViewChild(MatInput) input!: MatInput; + readonly input = viewChild.required(MatInput); ngAfterViewInit() { - this.input.focus(); + this.input().focus(); } } diff --git a/scenes/src/app/scenes/menu/menu-scene.ts b/scenes/src/app/scenes/menu/menu-scene.ts index 7ab3c4dc6..7b4267e7b 100644 --- a/scenes/src/app/scenes/menu/menu-scene.ts +++ b/scenes/src/app/scenes/menu/menu-scene.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ViewChild, ViewEncapsulation} from '@angular/core'; +import {AfterViewInit, Component, ViewEncapsulation, viewChild} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; @@ -12,9 +12,9 @@ import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; imports: [MatButtonModule, MatMenuModule, MatIconModule] }) export class MenuScene implements AfterViewInit { - @ViewChild('menuTrigger') trigger!: MatMenuTrigger; + readonly trigger = viewChild.required('menuTrigger'); ngAfterViewInit() { - this.trigger.openMenu(); + this.trigger().openMenu(); } } diff --git a/scenes/src/app/scenes/ripples/ripples-scene.ts b/scenes/src/app/scenes/ripples/ripples-scene.ts index bb96febc3..946ef6ee6 100644 --- a/scenes/src/app/scenes/ripples/ripples-scene.ts +++ b/scenes/src/app/scenes/ripples/ripples-scene.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ViewChild, ViewEncapsulation} from '@angular/core'; +import {AfterViewInit, Component, ViewEncapsulation, viewChild} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatRipple, MatRippleModule} from '@angular/material/core'; @@ -11,17 +11,17 @@ import {MatRipple, MatRippleModule} from '@angular/material/core'; imports: [MatRippleModule, MatButtonModule] }) export class RipplesScene implements AfterViewInit { - @ViewChild('button', {read: MatRipple}) buttonRipple!: MatRipple; - @ViewChild('wrapper', {read: MatRipple}) wrapperRipple!: MatRipple; + readonly buttonRipple = viewChild.required('button', { read: MatRipple }); + readonly wrapperRipple = viewChild.required('wrapper', { read: MatRipple }); ngAfterViewInit() { - this.buttonRipple.launch(140, 100, { + this.buttonRipple().launch(140, 100, { persistent: true, animation: {enterDuration: 0}, radius: 50, }); - this.wrapperRipple.launch(300, 100, { + this.wrapperRipple().launch(300, 100, { persistent: true, animation: {enterDuration: 0}, radius: 150, diff --git a/scenes/src/app/scenes/select/select-scene.ts b/scenes/src/app/scenes/select/select-scene.ts index 24cab535a..346eb104a 100644 --- a/scenes/src/app/scenes/select/select-scene.ts +++ b/scenes/src/app/scenes/select/select-scene.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ViewChild, ViewEncapsulation} from '@angular/core'; +import {AfterViewInit, Component, ViewEncapsulation, viewChild} from '@angular/core'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatSelect, MatSelectModule} from '@angular/material/select'; import {MatOptionModule} from '@angular/material/core'; @@ -12,9 +12,9 @@ import {MatOptionModule} from '@angular/material/core'; imports: [MatFormFieldModule, MatSelectModule, MatOptionModule] }) export class SelectScene implements AfterViewInit { - @ViewChild(MatSelect) select!: MatSelect; + readonly select = viewChild.required(MatSelect); ngAfterViewInit() { - this.select.open(); + this.select().open(); } } diff --git a/scenes/src/app/scenes/tooltip/tooltip-scene.ts b/scenes/src/app/scenes/tooltip/tooltip-scene.ts index d3e3435a4..bf4eed61d 100644 --- a/scenes/src/app/scenes/tooltip/tooltip-scene.ts +++ b/scenes/src/app/scenes/tooltip/tooltip-scene.ts @@ -1,4 +1,4 @@ -import {Component, ViewChild, AfterViewInit, ViewEncapsulation} from '@angular/core'; +import {Component, AfterViewInit, ViewEncapsulation, viewChild} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatTooltipModule, MatTooltip} from '@angular/material/tooltip'; import {MatIconModule} from '@angular/material/icon'; @@ -16,9 +16,9 @@ import {MatIconModule} from '@angular/material/icon'; ], }) export class TooltipScene implements AfterViewInit { - @ViewChild(MatTooltip) tooltip!: MatTooltip; + readonly tooltip = viewChild.required(MatTooltip); ngAfterViewInit() { - this.tooltip.toggle(); + this.tooltip().toggle(); } } diff --git a/src/app/pages/component-sidenav/component-sidenav.html b/src/app/pages/component-sidenav/component-sidenav.html index da12621aa..52e86144d 100644 --- a/src/app/pages/component-sidenav/component-sidenav.html +++ b/src/app/pages/component-sidenav/component-sidenav.html @@ -10,7 +10,7 @@ }
- +
diff --git a/src/app/pages/component-sidenav/component-sidenav.spec.ts b/src/app/pages/component-sidenav/component-sidenav.spec.ts index 4f7dae2ff..2ce1cc5c8 100644 --- a/src/app/pages/component-sidenav/component-sidenav.spec.ts +++ b/src/app/pages/component-sidenav/component-sidenav.spec.ts @@ -28,9 +28,9 @@ describe('ComponentSidenav', () => { // TODO refactor this as none of these expectations are ever verified waitForAsync(() => { - expect(component.sidenav instanceof MatSidenav).toBeTruthy(); + expect(component.sidenav() instanceof MatSidenav).toBeTruthy(); component.isScreenSmall.pipe(take(1)).subscribe(isSmall => expect(isSmall).toBeTruthy()); - expect(component.sidenav.opened).toBe(false); + expect(component.sidenav().opened).toBe(false); }); }); diff --git a/src/app/pages/component-sidenav/component-sidenav.ts b/src/app/pages/component-sidenav/component-sidenav.ts index 56a4e7382..077ccdcb2 100644 --- a/src/app/pages/component-sidenav/component-sidenav.ts +++ b/src/app/pages/component-sidenav/component-sidenav.ts @@ -4,10 +4,10 @@ import { NgZone, OnDestroy, OnInit, - ViewChild, ViewEncapsulation, forwardRef, - input + input, + viewChild } from '@angular/core'; import {animate, state, style, transition, trigger} from '@angular/animations'; import {CdkAccordionModule} from '@angular/cdk/accordion'; @@ -82,7 +82,7 @@ const SMALL_WIDTH_BREAKPOINT = 959; ], }) export class ComponentSidenav implements OnInit, OnDestroy { - @ViewChild(MatSidenav) sidenav!: MatSidenav; + readonly sidenav = viewChild.required(MatSidenav); params: Observable | undefined; isExtraScreenSmall: Observable; isScreenSmall: Observable; @@ -108,8 +108,9 @@ export class ComponentSidenav implements OnInit, OnDestroy { this.subscriptions.add( this._navigationFocusService.navigationEndEvents.pipe(map(() => this.isScreenSmall)) .subscribe((shouldCloseSideNav) => { - if (shouldCloseSideNav && this.sidenav) { - this.sidenav.close(); + const sidenav = this.sidenav(); + if (shouldCloseSideNav && sidenav) { + sidenav.close(); } } )); diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts index fcda09f16..cc596e4ec 100644 --- a/src/app/pages/component-viewer/component-viewer.ts +++ b/src/app/pages/component-viewer/component-viewer.ts @@ -7,10 +7,9 @@ import { NgModule, OnDestroy, OnInit, - QueryList, - ViewChild, - ViewChildren, ViewEncapsulation, + viewChild, + viewChildren } from '@angular/core'; import {MatTabsModule} from '@angular/material/tabs'; import {ActivatedRoute, @@ -95,8 +94,8 @@ export class ComponentViewer implements OnDestroy { */ @Directive() export class ComponentBaseView implements OnInit, OnDestroy { - @ViewChild('toc') tableOfContents!: TableOfContents; - @ViewChildren(DocViewer) viewers!: QueryList; + readonly tableOfContents = viewChild.required('toc'); + readonly viewers = viewChildren(DocViewer); showToc: Observable; private _destroyed = new Subject(); @@ -116,8 +115,9 @@ export class ComponentBaseView implements OnInit, OnDestroy { ngOnInit() { this.componentViewer.componentDocItem.pipe(takeUntil(this._destroyed)).subscribe(() => { - if (this.tableOfContents) { - this.tableOfContents.resetHeaders(); + const tableOfContents = this.tableOfContents(); + if (tableOfContents) { + tableOfContents.resetHeaders(); } }); @@ -125,8 +125,8 @@ export class ComponentBaseView implements OnInit, OnDestroy { skip(1), takeUntil(this._destroyed) ).subscribe(() => { - if (this.tableOfContents) { - this.viewers.forEach(viewer => { + if (this.tableOfContents()) { + this.viewers().forEach(viewer => { viewer.contentRendered.emit(viewer._elementRef.nativeElement); }); } @@ -139,9 +139,10 @@ export class ComponentBaseView implements OnInit, OnDestroy { } updateTableOfContents(sectionName: string, docViewerContent: HTMLElement, sectionIndex = 0) { - if (this.tableOfContents) { - this.tableOfContents.addHeaders(sectionName, docViewerContent, sectionIndex); - this.tableOfContents.updateScrollPosition(); + const tableOfContents = this.tableOfContents(); + if (tableOfContents) { + tableOfContents.addHeaders(sectionName, docViewerContent, sectionIndex); + tableOfContents.updateScrollPosition(); } } } diff --git a/src/app/shared/carousel/carousel.ts b/src/app/shared/carousel/carousel.ts index 383291e1d..f64ae3be3 100644 --- a/src/app/shared/carousel/carousel.ts +++ b/src/app/shared/carousel/carousel.ts @@ -1,16 +1,15 @@ import { AfterContentInit, Component, - ContentChildren, Directive, ElementRef, HostBinding, Inject, Optional, - QueryList, - ViewChild, ViewEncapsulation, - input + input, + contentChildren, + viewChild } from '@angular/core'; import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes'; @@ -43,8 +42,8 @@ export class CarouselItem implements FocusableOption { }) export class Carousel implements AfterContentInit { readonly ariaLabel = input(undefined, { alias: 'aria-label' }); - @ContentChildren(CarouselItem) items!: QueryList; - @ViewChild('list') list!: ElementRef; + readonly items = contentChildren(CarouselItem); + readonly list = viewChild.required>('list'); @HostBinding('class.animations-disabled') readonly animationsDisabled: boolean; position = 0; showPrevArrow = false; @@ -79,12 +78,12 @@ export class Carousel implements AfterContentInit { } ngAfterContentInit(): void { - this._keyManager = new FocusKeyManager(this.items); + this._keyManager = new FocusKeyManager(this.items()); } /** Goes to the next set of items */ next() { - for (let i = this.index; i < this.items.length; i++) { + for (let i = this.index; i < this.items().length; i++) { if (this._isOutOfView(i)) { this.index = i; this._scrollToActiveItem(); @@ -106,7 +105,7 @@ export class Carousel implements AfterContentInit { /** Updates the `tabindex` of each of the items based on their active state. */ private _updateItemTabIndices() { - this.items.forEach((item: CarouselItem) => { + this.items().forEach((item: CarouselItem) => { if (this._keyManager != null) { item.tabindex = item === this._keyManager.activeItem ? '0' : '-1'; } @@ -119,7 +118,7 @@ export class Carousel implements AfterContentInit { return; } - const itemsArray = this.items.toArray(); + const itemsArray = this.items(); let targetItemIndex = this.index; // Only shift the carousel by one if we're going forwards. This @@ -129,7 +128,7 @@ export class Carousel implements AfterContentInit { } this.position = itemsArray[targetItemIndex].element.nativeElement.offsetLeft; - this.list.nativeElement.style.transform = `translateX(-${this.position}px)`; + this.list().nativeElement.style.transform = `translateX(-${this.position}px)`; this.showPrevArrow = this.index > 0; this.showNextArrow = false; @@ -143,7 +142,7 @@ export class Carousel implements AfterContentInit { /** Checks whether an item at a specific index is outside of the viewport. */ private _isOutOfView(index: number, side?: 'start' | 'end') { - const {offsetWidth, offsetLeft} = this.items.toArray()[index].element.nativeElement; + const {offsetWidth, offsetLeft} = this.items()[index].element.nativeElement; if ((!side || side === 'start') && offsetLeft - this.position < 0) { return true; @@ -151,7 +150,7 @@ export class Carousel implements AfterContentInit { return ( (!side || side === 'end') && - offsetWidth + offsetLeft - this.position > this.list.nativeElement.clientWidth + offsetWidth + offsetLeft - this.position > this.list().nativeElement.clientWidth ); } } diff --git a/src/app/shared/example-viewer/code-snippet.ts b/src/app/shared/example-viewer/code-snippet.ts index a8009fb14..8cbe61ac3 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, - ViewChild, forwardRef, - input + input, + viewChild } from '@angular/core'; import {DocViewer} from '../doc-viewer/doc-viewer'; @@ -17,5 +17,5 @@ import {DocViewer} from '../doc-viewer/doc-viewer'; }) export class CodeSnippet { readonly source = input(); - @ViewChild('viewer') viewer!: DocViewer; + readonly viewer = viewChild.required('viewer'); } diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html index 17fc4d8ed..efccbc328 100644 --- a/src/app/shared/example-viewer/example-viewer.html +++ b/src/app/shared/example-viewer/example-viewer.html @@ -2,7 +2,7 @@ @if (view === 'snippet') {
-