Skip to content

Commit

Permalink
Migrations: lazy-loading &signal-queries
Browse files Browse the repository at this point in the history 
_____
ng generate @angular/core:route-lazy-loading
✔ Which path in your project should be migrated? .
    🎉 Automated migration step has finished! 🎉
    Number of updated routes: 6
    Number of skipped routes: 0
    IMPORTANT! Please verify manually that your application builds and behaves as expected.
    See https://angular.dev/reference/migrations/route-lazy-loading for more information.
UPDATE src/app/app.routing.ts (589 bytes)
_____
ng generate @angular/core:signal-queries-migration
✔ Which directory do you want to migrate? ./
✔ Do you want to migrate as much as possible, even if it may break your build? yes
    Preparing analysis for: src/tsconfig.app.json..
    Preparing analysis for: projects/ng-select2-component/tsconfig.lib.json..
    Preparing analysis for: src/tsconfig.spec.json..
    Preparing analysis for: projects/ng-select2-component/tsconfig.spec.json..
    Scanning for queries: src/tsconfig.app.json..
    Scanning for queries: projects/ng-select2-component/tsconfig.lib.json..
    Scanning for queries: src/tsconfig.spec.json..
    Scanning for queries: projects/ng-select2-component/tsconfig.spec.json..

    Processing analysis data between targets..

    Migrating: src/tsconfig.app.json..
    Migrating: projects/ng-select2-component/tsconfig.lib.json..
    Migrating: src/tsconfig.spec.json..
    Migrating: projects/ng-select2-component/tsconfig.spec.json..
    Applying changes..

    Successfully migrated to signal queries 🎉

    Successfully migrated to signal queries 🎉
      -> Migrated 6/6 queries.
  • Loading branch information
@Zefling
Zefling committed Dec 4, 2024
1 parent ff66df2 commit c69033c
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 51 deletions.
4 changes: 4 additions & 0 deletions projects/ng-select2-component/src/lib/select2-interfaces.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { TemplateRef } from '@angular/core';

import { Select2 } from './select2.component';

export interface Select2Group {
Expand Down Expand Up @@ -92,3 +94,5 @@ export interface Select2ScrollEvent {
}

export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);

export type Select2Template = TemplateRef<any> | { [key: string]: TemplateRef<any> };
85 changes: 40 additions & 45 deletions projects/ng-select2-component/src/lib/select2.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@ import {
} from '@angular/cdk/overlay';
import { ViewportRuler } from '@angular/cdk/scrolling';
import { NgTemplateOutlet } from '@angular/common';
import type { ElementRef, QueryList } from '@angular/core';
import type { ElementRef } from '@angular/core';
import {
AfterViewInit,
Attribute,
ChangeDetectorRef,
Component,
DoCheck,
HostBinding,
HostListener,
Input,
OnInit,
Optional,
Self,
TemplateRef,
ViewChild,
ViewChildren,
booleanAttribute,
numberAttribute,
signal,
input,
output
AfterViewInit,
Attribute,
ChangeDetectorRef,
Component,
DoCheck,
HostBinding,
HostListener,
Input,
OnInit,
Optional,
Self,
TemplateRef,
booleanAttribute,
input,
numberAttribute,
output,
signal,
viewChild,
viewChildren,
} from '@angular/core';
import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';

Expand All @@ -43,6 +43,7 @@ import {
Select2ScrollEvent,
Select2SearchEvent,
Select2SelectionOverride,
Select2Template,
Select2UpdateEvent,
Select2UpdateValue,
Select2Value,
Expand Down Expand Up @@ -117,9 +118,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
readonly editPattern = input<(str: string) => string>(undefined);

/** template(s) for formatting */
readonly templates = input<TemplateRef<any> | {
[key: string]: TemplateRef<any>;
}>(undefined);
readonly templates = input<Select2Template>(undefined);

/** template for formatting selected option */
readonly templateSelection = input<TemplateRef<any>>(undefined);
Expand Down Expand Up @@ -300,12 +299,12 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView

private _minCountForSearch?: number;

@ViewChild(CdkConnectedOverlay) private cdkConnectedOverlay: CdkConnectedOverlay;
@ViewChild('selection', { static: true }) private selection: ElementRef<HTMLElement>;
@ViewChild('results') private resultContainer: ElementRef<HTMLElement>;
@ViewChildren('result') private results: QueryList<ElementRef>;
@ViewChild('searchInput') private searchInput: ElementRef<HTMLElement>;
@ViewChild('dropdown') private dropdown: ElementRef<HTMLElement>;
readonly cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
readonly selection = viewChild<ElementRef<HTMLElement>>('selection');
readonly resultContainer = viewChild<ElementRef<HTMLElement>>('results');
readonly results = viewChildren<ElementRef>('result');
readonly searchInput = viewChild<ElementRef<HTMLElement>>('searchInput');
readonly dropdown = viewChild<ElementRef<HTMLElement>>('dropdown');

private hoveringValue: Select2Value | null | undefined = null;
private innerSearchText = '';
Expand All @@ -314,7 +313,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
private selectionElement: HTMLElement;

private get resultsElement(): HTMLElement {
return this.resultContainer?.nativeElement;
return this.resultContainer()?.nativeElement;
}

private _stateChanges = new Subject<void>();
Expand Down Expand Up @@ -400,7 +399,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}

ngAfterViewInit() {
this.cdkConnectedOverlay.positionChange.subscribe((posChange: ConnectedOverlayPositionChange) => {
this.cdkConnectedOverlay().positionChange.subscribe((posChange: ConnectedOverlayPositionChange) => {
if (
this.listPosition() === 'auto' &&
posChange.connectionPair?.originY &&
Expand All @@ -412,7 +411,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}
});

this.selectionElement = this.selection.nativeElement;
this.selectionElement = this.selection().nativeElement;
this.triggerRect();
}

Expand Down Expand Up @@ -517,7 +516,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}
setTimeout(() => {
this.triggerRect();
this.cdkConnectedOverlay?.overlayRef?.updatePosition();
this.cdkConnectedOverlay()?.overlayRef?.updatePosition();
}, 100);
});
}
Expand Down Expand Up @@ -568,9 +567,8 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView

triggerRect() {
this._triggerRect = this.selectionElement.getBoundingClientRect();
this._dropdownRect = this.dropdown?.nativeElement
? this.dropdown.nativeElement.getBoundingClientRect()
: undefined;
const dropdown = this.dropdown();
this._dropdownRect = dropdown?.nativeElement ? dropdown.nativeElement.getBoundingClientRect() : undefined;
}

isNumber(o: any): boolean {
Expand Down Expand Up @@ -629,11 +627,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}

const limitSelection = this.limitSelection();
return (
!this.multiple ||
!limitSelection ||
(Array.isArray(this._value) && this._value.length < limitSelection)
);
return !this.multiple || !limitSelection || (Array.isArray(this._value) && this._value.length < limitSelection);
}

private testValueChange(value1: Select2UpdateValue, value2: Select2UpdateValue) {
Expand Down Expand Up @@ -1073,7 +1067,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
private updateScrollFromOption(option: Select2Option) {
if (option) {
this.hoveringValue = option.value;
const domElement = this.results.find(r => r.nativeElement.innerText.trim() === option.label);
const domElement = this.results().find(r => r.nativeElement.innerText.trim() === option.label);
if (domElement && this.resultsElement) {
this.resultsElement.scrollTop = 0;
const listClientRect = this.resultsElement.getBoundingClientRect();
Expand Down Expand Up @@ -1179,8 +1173,9 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
private _focusSearchboxOrResultsElement(focus = true) {
if (!this.isSearchboxHidden) {
setTimeout(() => {
if (this.searchInput && this.searchInput.nativeElement && focus) {
this.searchInput.nativeElement.focus();
const searchInput = this.searchInput();
if (searchInput && searchInput.nativeElement && focus) {
searchInput.nativeElement.focus();
}
});
if (this.resultsElement && focus) {
Expand All @@ -1205,4 +1200,4 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
? this._overlayPosition === 'top'
: listPosition === 'above';
}
}
}
10 changes: 4 additions & 6 deletions src/app/app.routing.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppExamplesComponent } from './app-examples.component';
import { AppGenComponent } from './app-gen.component';

const routes: Routes = [
{ path: 'examples', component: AppExamplesComponent },
{ path: 'generator', component: AppGenComponent },
{ path: '**', component: AppExamplesComponent },
{ path: 'examples', loadComponent: () => import('./app-examples.component').then(m => m.AppExamplesComponent) },
{ path: 'generator', loadComponent: () => import('./app-gen.component').then(m => m.AppGenComponent) },
{ path: '**', loadComponent: () => import('./app-examples.component').then(m => m.AppExamplesComponent) },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
export class AppRoutingModule {}

0 comments on commit c69033c

Please sign in to comment.