diff --git a/CHANGELOG.md b/CHANGELOG.md index f33734641..e1cce0163 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ All scaffolded projects now include AI-ready configuration files to enhance the A comprehensive modernization of all Angular templates to align with Angular v21+ patterns. +* **Signals and inject() migration:** replaced `@ViewChild` with signal-based `viewChild()` / `viewChild.required()`, `@Output` with `output()`, and constructor-based dependency injection with the `inject()` function across all 34 template files ([#1586](https://github.com/IgniteUI/igniteui-cli/pull/1586)) * **Control flow migration:** replaced `*ngIf`, `*ngFor`, `*ngSwitch` structural directives with built-in `@if`, `@for`, `@switch` block syntax; migrated `[ngClass]` to `[class]` bindings across all templates ([#1584](https://github.com/IgniteUI/igniteui-cli/pull/1584)) * **Standalone component adoption:** removed NgModule files (`AuthenticationModule`, `AppModule`) and replaced with provider functions; `provideAuthentication()` consolidates all auth setup ([#1554](https://github.com/IgniteUI/igniteui-cli/pull/1554)) * **Auth library upgrade:** migrated to `angular-auth-oidc-client` v21 API with configurable social login providers (Google, Microsoft, Facebook) ([#1554](https://github.com/IgniteUI/igniteui-cli/pull/1554)) diff --git a/packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts index befcef7d0..336e65972 100644 --- a/packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, Pipe, PipeTransform, ViewChild, forwardRef } from '@angular/core'; +import { Component, Pipe, PipeTransform, viewChild, forwardRef } from '@angular/core'; import { IgxToastComponent, ISelectionEventArgs, @@ -44,8 +44,7 @@ export class <%=ClassName%> { verticalDirection: VerticalAlignment.Middle }; - @ViewChild(IgxToastComponent, { static: true }) - public toast!: IgxToastComponent; + public toast = viewChild.required(IgxToastComponent); constructor() { this.regions = townsExtended; @@ -59,7 +58,7 @@ export class <%=ClassName%> { const townEntry = allTowns.find(t => t.name === e.newSelection.value); this.postalCode = townEntry?.postalCode; - this.toast.open(undefined, this.messagePositionSettings); + this.toast().open(undefined, this.messagePositionSettings); } } diff --git a/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.ts index 9cff4af47..ddefe369b 100644 --- a/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.ts @@ -2,7 +2,7 @@ import { AfterViewInit, Component, ViewEncapsulation, - ViewChild, + viewChild, } from '@angular/core'; import { IgxButtonDirective, IgxLayoutDirective } from '<%=igxPackage%>'; import { @@ -19,42 +19,41 @@ import { imports: [IgxLayoutDirective, IgxButtonDirective, IgxBulletGraphCoreModule] }) export class <%=ClassName%> implements AfterViewInit { - @ViewChild('bulletGraph', { static: true }) - public bulletGraph!: IgxBulletGraphComponent; + public bulletGraph = viewChild.required('bulletGraph'); public ngAfterViewInit(): void { // enabling animation duration (in milliseconds) - this.bulletGraph.transitionDuration = 500; + this.bulletGraph().transitionDuration = 500; this.AnimateToGauge3(); } public AnimateToGauge3(): void { - this.bulletGraph.minimumValue = 0; - this.bulletGraph.maximumValue = 120; - this.bulletGraph.value = 70; - this.bulletGraph.interval = 10; + this.bulletGraph().minimumValue = 0; + this.bulletGraph().maximumValue = 120; + this.bulletGraph().value = 70; + this.bulletGraph().interval = 10; // setting appearance of labels - this.bulletGraph.labelInterval = 10; - this.bulletGraph.labelExtent = 0.02; + this.bulletGraph().labelInterval = 10; + this.bulletGraph().labelExtent = 0.02; // setting custom appearance of performance bar - this.bulletGraph.valueInnerExtent = 0.5; - this.bulletGraph.valueOuterExtent = 0.7; - this.bulletGraph.valueBrush = '#000000'; + this.bulletGraph().valueInnerExtent = 0.5; + this.bulletGraph().valueOuterExtent = 0.7; + this.bulletGraph().valueBrush = '#000000'; // setting custom appearance of target bar - this.bulletGraph.targetValueBrush = '#000000'; - this.bulletGraph.targetValueBreadth = 10; - this.bulletGraph.targetValue = 90; + this.bulletGraph().targetValueBrush = '#000000'; + this.bulletGraph().targetValueBreadth = 10; + this.bulletGraph().targetValue = 90; // setting appearance of major/minor ticks - this.bulletGraph.minorTickCount = 5; - this.bulletGraph.minorTickEndExtent = 0.10; - this.bulletGraph.minorTickStartExtent = 0.20; - this.bulletGraph.tickStartExtent = 0.20; - this.bulletGraph.tickEndExtent = 0.05; - this.bulletGraph.tickStrokeThickness = 2; + this.bulletGraph().minorTickCount = 5; + this.bulletGraph().minorTickEndExtent = 0.10; + this.bulletGraph().minorTickStartExtent = 0.20; + this.bulletGraph().tickStartExtent = 0.20; + this.bulletGraph().tickEndExtent = 0.05; + this.bulletGraph().tickStrokeThickness = 2; // setting custom gauge ranges const range1 = new IgxLinearGraphRangeComponent(); @@ -67,16 +66,16 @@ export class <%=ClassName%> implements AfterViewInit { range3.startValue = 80; range3.endValue = 120; - this.bulletGraph.rangeBrushes = [ '#FF9800', '#F96232', '#C62828']; - this.bulletGraph.rangeOutlines = [ '#FF9800', '#F96232', '#C62828']; - this.bulletGraph.ranges.clear(); - this.bulletGraph.ranges.add(range1); - this.bulletGraph.ranges.add(range2); - this.bulletGraph.ranges.add(range3); + this.bulletGraph().rangeBrushes = [ '#FF9800', '#F96232', '#C62828']; + this.bulletGraph().rangeOutlines = [ '#FF9800', '#F96232', '#C62828']; + this.bulletGraph().ranges.clear(); + this.bulletGraph().ranges.add(range1); + this.bulletGraph().ranges.add(range2); + this.bulletGraph().ranges.add(range3); // setting extent of all gauge ranges - for (let i = 0; i < this.bulletGraph.ranges.count; i++) { - const range = this.bulletGraph.ranges.item(i); + for (let i = 0; i < this.bulletGraph().ranges.count; i++) { + const range = this.bulletGraph().ranges.item(i); range.innerStartExtent = 0.2; range.innerEndExtent = 0.2; range.outerStartExtent = 0.95; @@ -84,47 +83,47 @@ export class <%=ClassName%> implements AfterViewInit { } // setting extent of gauge scale - this.bulletGraph.scaleBackgroundThickness = 0.5; - this.bulletGraph.scaleBackgroundBrush = '#dbdbdb'; - this.bulletGraph.scaleBackgroundOutline = 'gray'; - this.bulletGraph.scaleStartExtent = 0.05; - this.bulletGraph.scaleEndExtent = 0.95; - this.bulletGraph.scaleBackgroundThickness = 0; + this.bulletGraph().scaleBackgroundThickness = 0.5; + this.bulletGraph().scaleBackgroundBrush = '#dbdbdb'; + this.bulletGraph().scaleBackgroundOutline = 'gray'; + this.bulletGraph().scaleStartExtent = 0.05; + this.bulletGraph().scaleEndExtent = 0.95; + this.bulletGraph().scaleBackgroundThickness = 0; // setting appearance of backing fill and outline - this.bulletGraph.backingBrush = '#f7f7f7'; - this.bulletGraph.backingOutline = '#d1d1d1'; - this.bulletGraph.backingStrokeThickness = 0; + this.bulletGraph().backingBrush = '#f7f7f7'; + this.bulletGraph().backingOutline = '#d1d1d1'; + this.bulletGraph().backingStrokeThickness = 0; } public AnimateToGauge2(): void { - this.bulletGraph.minimumValue = 100; - this.bulletGraph.maximumValue = 200; - this.bulletGraph.value = 120; - this.bulletGraph.interval = 10; + this.bulletGraph().minimumValue = 100; + this.bulletGraph().maximumValue = 200; + this.bulletGraph().value = 120; + this.bulletGraph().interval = 10; // setting appearance of labels - this.bulletGraph.labelInterval = 10; - this.bulletGraph.labelExtent = 0.02; + this.bulletGraph().labelInterval = 10; + this.bulletGraph().labelExtent = 0.02; // setting custom appearance of performance bar - this.bulletGraph.valueInnerExtent = 0.5; - this.bulletGraph.valueOuterExtent = 0.7; - this.bulletGraph.valueBrush = '#000000'; + this.bulletGraph().valueInnerExtent = 0.5; + this.bulletGraph().valueOuterExtent = 0.7; + this.bulletGraph().valueBrush = '#000000'; // setting custom appearance of target bar - this.bulletGraph.targetValueBrush = '#000000'; - this.bulletGraph.targetValueBreadth = 10; - this.bulletGraph.targetValue = 180; + this.bulletGraph().targetValueBrush = '#000000'; + this.bulletGraph().targetValueBreadth = 10; + this.bulletGraph().targetValue = 180; // setting appearance of major/minor ticks - this.bulletGraph.minorTickCount = 5; - this.bulletGraph.minorTickEndExtent = 0.10; - this.bulletGraph.minorTickStartExtent = 0.20; - this.bulletGraph.tickStartExtent = 0.20; - this.bulletGraph.tickEndExtent = 0.05; - this.bulletGraph.tickStrokeThickness = 2; + this.bulletGraph().minorTickCount = 5; + this.bulletGraph().minorTickEndExtent = 0.10; + this.bulletGraph().minorTickStartExtent = 0.20; + this.bulletGraph().tickStartExtent = 0.20; + this.bulletGraph().tickEndExtent = 0.05; + this.bulletGraph().tickStrokeThickness = 2; // setting custom gauge ranges const range1 = new IgxLinearGraphRangeComponent(); @@ -140,17 +139,17 @@ export class <%=ClassName%> implements AfterViewInit { range4.startValue = 175; range4.endValue = 200; - this.bulletGraph.rangeBrushes = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; - this.bulletGraph.rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; - this.bulletGraph.ranges.clear(); - this.bulletGraph.ranges.add(range1); - this.bulletGraph.ranges.add(range2); - this.bulletGraph.ranges.add(range3); - this.bulletGraph.ranges.add(range4); + this.bulletGraph().rangeBrushes = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; + this.bulletGraph().rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; + this.bulletGraph().ranges.clear(); + this.bulletGraph().ranges.add(range1); + this.bulletGraph().ranges.add(range2); + this.bulletGraph().ranges.add(range3); + this.bulletGraph().ranges.add(range4); // setting extent of all gauge ranges - for (let i = 0; i < this.bulletGraph.ranges.count; i++) { - const range = this.bulletGraph.ranges.item(i); + for (let i = 0; i < this.bulletGraph().ranges.count; i++) { + const range = this.bulletGraph().ranges.item(i); range.innerStartExtent = 0.2; range.innerEndExtent = 0.2; range.outerStartExtent = 0.95; @@ -158,46 +157,46 @@ export class <%=ClassName%> implements AfterViewInit { } // setting extent of gauge scale - this.bulletGraph.scaleBackgroundThickness = 0.5; - this.bulletGraph.scaleBackgroundBrush = '#dbdbdb'; - this.bulletGraph.scaleBackgroundOutline = 'gray'; - this.bulletGraph.scaleStartExtent = 0.05; - this.bulletGraph.scaleEndExtent = 0.95; - this.bulletGraph.scaleBackgroundThickness = 0; + this.bulletGraph().scaleBackgroundThickness = 0.5; + this.bulletGraph().scaleBackgroundBrush = '#dbdbdb'; + this.bulletGraph().scaleBackgroundOutline = 'gray'; + this.bulletGraph().scaleStartExtent = 0.05; + this.bulletGraph().scaleEndExtent = 0.95; + this.bulletGraph().scaleBackgroundThickness = 0; // setting appearance of backing fill and outline - this.bulletGraph.backingBrush = '#f7f7f7'; - this.bulletGraph.backingOutline = '#d1d1d1'; - this.bulletGraph.backingStrokeThickness = 0; + this.bulletGraph().backingBrush = '#f7f7f7'; + this.bulletGraph().backingOutline = '#d1d1d1'; + this.bulletGraph().backingStrokeThickness = 0; } public AnimateToGauge1(): void { - this.bulletGraph.minimumValue = 0; - this.bulletGraph.maximumValue = 80; - this.bulletGraph.value = 70; - this.bulletGraph.interval = 20; + this.bulletGraph().minimumValue = 0; + this.bulletGraph().maximumValue = 80; + this.bulletGraph().value = 70; + this.bulletGraph().interval = 20; // setting appearance of labels - this.bulletGraph.labelInterval = 20; - this.bulletGraph.labelExtent = 0.02; + this.bulletGraph().labelInterval = 20; + this.bulletGraph().labelExtent = 0.02; // setting custom appearance of performance bar - this.bulletGraph.valueInnerExtent = 0.5; - this.bulletGraph.valueOuterExtent = 0.7; - this.bulletGraph.valueBrush = '#000000'; + this.bulletGraph().valueInnerExtent = 0.5; + this.bulletGraph().valueOuterExtent = 0.7; + this.bulletGraph().valueBrush = '#000000'; // setting custom appearance of target bar - this.bulletGraph.targetValueBrush = '#000000'; - this.bulletGraph.targetValueBreadth = 10; - this.bulletGraph.targetValue = 60; + this.bulletGraph().targetValueBrush = '#000000'; + this.bulletGraph().targetValueBreadth = 10; + this.bulletGraph().targetValue = 60; // setting appearance of major/minor ticks - this.bulletGraph.minorTickCount = 5; - this.bulletGraph.minorTickEndExtent = 0.10; - this.bulletGraph.minorTickStartExtent = 0.20; - this.bulletGraph.tickStartExtent = 0.20; - this.bulletGraph.tickEndExtent = 0.05; - this.bulletGraph.tickStrokeThickness = 2; + this.bulletGraph().minorTickCount = 5; + this.bulletGraph().minorTickEndExtent = 0.10; + this.bulletGraph().minorTickStartExtent = 0.20; + this.bulletGraph().tickStartExtent = 0.20; + this.bulletGraph().tickEndExtent = 0.05; + this.bulletGraph().tickStrokeThickness = 2; // setting custom gauge ranges const range1 = new IgxLinearGraphRangeComponent(); @@ -207,15 +206,15 @@ export class <%=ClassName%> implements AfterViewInit { range2.startValue = 40; range2.endValue = 80; - this.bulletGraph.rangeBrushes = [ '#a4bd29', '#F86232' ]; - this.bulletGraph.rangeOutlines = [ '#a4bd29', '#F86232' ]; - this.bulletGraph.ranges.clear(); - this.bulletGraph.ranges.add(range1); - this.bulletGraph.ranges.add(range2); + this.bulletGraph().rangeBrushes = [ '#a4bd29', '#F86232' ]; + this.bulletGraph().rangeOutlines = [ '#a4bd29', '#F86232' ]; + this.bulletGraph().ranges.clear(); + this.bulletGraph().ranges.add(range1); + this.bulletGraph().ranges.add(range2); // setting extent of all gauge ranges - for (let i = 0; i < this.bulletGraph.ranges.count; i++) { - const range = this.bulletGraph.ranges.item(i); + for (let i = 0; i < this.bulletGraph().ranges.count; i++) { + const range = this.bulletGraph().ranges.item(i); range.innerStartExtent = 0.2; range.innerEndExtent = 0.2; range.outerStartExtent = 0.95; @@ -223,16 +222,16 @@ export class <%=ClassName%> implements AfterViewInit { } // setting extent of gauge scale - this.bulletGraph.scaleBackgroundThickness = 0.5; - this.bulletGraph.scaleBackgroundBrush = '#dbdbdb'; - this.bulletGraph.scaleBackgroundOutline = 'gray'; - this.bulletGraph.scaleStartExtent = 0.05; - this.bulletGraph.scaleEndExtent = 0.95; - this.bulletGraph.scaleBackgroundThickness = 0; + this.bulletGraph().scaleBackgroundThickness = 0.5; + this.bulletGraph().scaleBackgroundBrush = '#dbdbdb'; + this.bulletGraph().scaleBackgroundOutline = 'gray'; + this.bulletGraph().scaleStartExtent = 0.05; + this.bulletGraph().scaleEndExtent = 0.95; + this.bulletGraph().scaleBackgroundThickness = 0; // setting appearance of backing fill and outline - this.bulletGraph.backingBrush = '#f7f7f7'; - this.bulletGraph.backingOutline = '#d1d1d1'; - this.bulletGraph.backingStrokeThickness = 0; + this.bulletGraph().backingBrush = '#f7f7f7'; + this.bulletGraph().backingOutline = '#d1d1d1'; + this.bulletGraph().backingStrokeThickness = 0; } } diff --git a/packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts index 2e7ea506b..d106c12fa 100644 --- a/packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, viewChild } from '@angular/core'; import { CloseScrollStrategy, ConnectedPositioningStrategy, @@ -73,11 +73,9 @@ export class <%=ClassName%> { public chipList: NamedEntry[] = []; - @ViewChild('chipsArea', { static: true, read: IgxChipsAreaComponent }) - public chipsArea!: IgxChipsAreaComponent; + public chipsArea = viewChild.required('chipsArea', { read: IgxChipsAreaComponent }); - @ViewChild(IgxDropDownComponent, { static: true }) - public igxDropDown!: IgxDropDownComponent; + public igxDropDown = viewChild.required(IgxDropDownComponent); private positionSettings = { horizontalStartPoint: HorizontalAlignment.Left, @@ -91,7 +89,7 @@ export class <%=ClassName%> { scrollStrategy: new CloseScrollStrategy() }; - constructor(public cdr: ChangeDetectorRef) { } + public cdr = inject(ChangeDetectorRef); public chipRemoved(event: IBaseChipEventArgs) { this.chipList = this.chipList.filter((item) => { @@ -102,7 +100,7 @@ export class <%=ClassName%> { public toggleDropDown(ev: MouseEvent) { this.overlaySettings.target = ev.target as HTMLButtonElement; - this.igxDropDown.toggle(this.overlaySettings); + this.igxDropDown().toggle(this.overlaySettings); } public itemSelection(ev: ISelectionEventArgs) { diff --git a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.ts index d788822cd..a7eddef93 100644 --- a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.ts @@ -3,10 +3,10 @@ import { Component, ElementRef, HostListener, - Inject, OnDestroy, OnInit, - ViewChild, + inject, + viewChild, } from '@angular/core'; import { AbsolutePosition, @@ -57,17 +57,13 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; ], }) export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { - @ViewChild('grid1', { read: IgxGridComponent, static: true }) - public grid1!: IgxGridComponent; + public grid1 = viewChild.required('grid1', { read: IgxGridComponent }); - @ViewChild('paginator', { read: IgxPaginatorComponent, static: true }) - public paginator!: IgxPaginatorComponent; + public paginator = viewChild.required('paginator', { read: IgxPaginatorComponent }); - @ViewChild('winnerAlert', { static: true }) - public winnerAlert!: ElementRef; + public winnerAlert = viewChild.required('winnerAlert'); - @ViewChild('finishedAlert', { static: true }) - public finishedAlert!: ElementRef; + public finishedAlert = viewChild.required('finishedAlert'); public displayType = SparklineDisplayType; public topSpeedSummary = CustomTopSpeedSummary; @@ -115,7 +111,7 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { return (this.windowWidth && this.windowWidth < 860) || !this.live; } - constructor(@Inject(IgxOverlayService) public overlayService: IgxOverlayService) { } + public overlayService = inject(IgxOverlayService); public ngOnInit(): void { this.localData = AthletesData.slice(0, 30).sort((a, b) => b.TrackProgress - a.TrackProgress); @@ -130,7 +126,7 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { public ngAfterViewInit(): void { this.overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings( AbsolutePosition.Center, - this.grid1 + this.grid1() as any ); this.overlaySettings.modal = true; } @@ -145,7 +141,7 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { } public isTop3(cell: CellType): boolean { - const top = this.paginator.page === 0 && cell.row.index < 4; + const top = this.paginator().page === 0 && cell.row.index < 4; return top; } @@ -227,8 +223,8 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { public filter(event: Event): void { const target = event.target as HTMLInputElement; const term = target.value; - this.grid1.filter('CountryName', term, IgxStringFilteringOperand.instance().condition('contains'), true); - this.grid1.markForCheck(); + this.grid1().filter('CountryName', term, IgxStringFilteringOperand.instance().condition('contains'), true); + this.grid1().markForCheck(); } public showAlert(element: ElementRef): void { @@ -252,7 +248,7 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { } if (this.isFinished) { this.live = false; - this.paginator.page = 0; + this.paginator().page = 0; return; } this.updateData(); @@ -265,21 +261,21 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { if (!this.hasWinner && this.localData[0].TrackProgress >= 100) { this.winner = this.localData[0]; this.hasWinner = true; - this.showAlert(this.winnerAlert); + this.showAlert(this.winnerAlert()); } } // move grid to next page to monitor players who still run - const firstOnPage = this.grid1.getCellByColumn(0, 'TrackProgress'); + const firstOnPage = this.grid1().getCellByColumn(0, 'TrackProgress'); if (firstOnPage && firstOnPage.value === 100) { - this.paginator.page = this.paginator.page + 1; + this.paginator().page = this.paginator().page + 1; } // show Top 3 players after race has finished if (this.localData[this.localData.length - 1].TrackProgress === 100) { this.top3 = this.localData.slice(0, 3); this.isFinished = true; - this.showAlert(this.finishedAlert); + this.showAlert(this.finishedAlert()); } } @@ -292,7 +288,7 @@ export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit { if (rec.BeatsPerMinute !== undefined) { rec.BeatsPerMinute += this.generateRandomNumber(-5, 5); } - if (rec.Id !== undefined && rec.Id < this.paginator.perPage + 1) { + if (rec.Id !== undefined && rec.Id < this.paginator().perPage + 1) { rec.TrackProgress = Math.min(rec.TrackProgress + this.generateRandomNumber(15, 20), 100); } else { rec.TrackProgress = Math.min(rec.TrackProgress + this.generateRandomNumber(7, 12), 100); diff --git a/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts index 7abbf060a..63d4cc60a 100644 --- a/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts @@ -3,8 +3,9 @@ import { OnInit, AfterViewInit, QueryList, - ViewChild, + viewChild, ElementRef, + inject, } from '@angular/core'; import { @@ -76,14 +77,13 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; }) export class <%=ClassName%> implements OnInit, AfterViewInit { - @ViewChild('grid1', { read: IgxGridComponent, static: true }) - public grid1!: IgxGridComponent; + public grid1 = viewChild.required('grid1', { read: IgxGridComponent }); - @ViewChild('toggleRefHiding') public toggleRefHiding!: IgxToggleDirective; - @ViewChild('toggleRefPinning') public toggleRefPinning!: IgxToggleDirective; + public toggleRefHiding = viewChild('toggleRefHiding'); + public toggleRefPinning = viewChild('toggleRefPinning'); - @ViewChild('hidingButton') public hidingButton!: ElementRef; - @ViewChild('pinningButton') public pinningButton!: ElementRef; + public hidingButton = viewChild('hidingButton'); + public pinningButton = viewChild('pinningButton'); public localData: Employee[] = []; public dealsSummary = DealsSummary; @@ -112,10 +112,10 @@ export class <%=ClassName%> implements OnInit, AfterViewInit { scrollStrategy: new CloseScrollStrategy() }; - constructor( - private csvExporter: IgxCsvExporterService, - private excelExporter: IgxExcelExporterService) { + private csvExporter = inject(IgxCsvExporterService); + private excelExporter = inject(IgxExcelExporterService); + constructor() { const exporterCb = (args: IColumnExportingEventArgs): void => { if (args.field === 'Deals') { args.cancel = true; } }; @@ -133,17 +133,17 @@ export class <%=ClassName%> implements OnInit, AfterViewInit { } public toggleHiding(): void { - this.overlaySettings.target = this.hidingButton.nativeElement; - this.toggleRefHiding.toggle(this.overlaySettings); + this.overlaySettings.target = this.hidingButton()!.nativeElement; + this.toggleRefHiding()!.toggle(this.overlaySettings); } public togglePinning(): void { - this.overlaySettings.target = this.pinningButton.nativeElement; - this.toggleRefPinning.toggle(this.overlaySettings); + this.overlaySettings.target = this.pinningButton()!.nativeElement; + this.toggleRefPinning()!.toggle(this.overlaySettings); } public ngAfterViewInit(): void { - this.cols = this.grid1.columnList; + this.cols = this.grid1().columnList; this.hiddenColsLength = this.cols.filter((col) => col.hidden).length; this.pinnedColsLength = this.cols.filter((col) => col.pinned).length; } @@ -159,10 +159,10 @@ export class <%=ClassName%> implements OnInit, AfterViewInit { public togglePin(col: ColumnType, evt: any): void { if (col.pinned) { - this.grid1.unpinColumn(col.field); + this.grid1().unpinColumn(col.field); this.pinnedColsLength--; } else { - if (this.grid1.pinColumn(col.field)) { + if (this.grid1().pinColumn(col.field)) { this.pinnedColsLength++; } else { // if pinning fails uncheck the checkbox @@ -178,21 +178,21 @@ export class <%=ClassName%> implements OnInit, AfterViewInit { public searchKeyDown(ev: KeyboardEvent): void { if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { ev.preventDefault(); - this.grid1.findNext(this.searchText, this.caseSensitive); + this.grid1().findNext(this.searchText, this.caseSensitive); } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { ev.preventDefault(); - this.grid1.findPrev(this.searchText, this.caseSensitive); + this.grid1().findPrev(this.searchText, this.caseSensitive); } } public updateSearch(): void { this.caseSensitive = !this.caseSensitive; - this.grid1.findNext(this.searchText, this.caseSensitive); + this.grid1().findNext(this.searchText, this.caseSensitive); } public clearSearch(): void { this.searchText = ''; - this.grid1.clearSearch(); + this.grid1().clearSearch(); } public formatValue(val: any): string { diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.ts index 23bb5e6af..a65c2b9ec 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.ts @@ -5,7 +5,8 @@ import { ElementRef, OnDestroy, OnInit, - ViewChild, + inject, + viewChild, } from '@angular/core'; import { CellType, @@ -82,13 +83,13 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; ] }) export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { - @ViewChild('grid1', { static: true }) public grid1!: IgxGridComponent; - @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent; - @ViewChild('buttonGroup2', { static: true }) public buttonGroup2!: IgxButtonGroupComponent; - @ViewChild('slider1', { static: true }) public volumeSlider!: IgxSliderComponent; - @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent; - @ViewChild('chart1', { static: true }) public chart1!: IgxCategoryChartComponent; - @ViewChild('dialog', { static: true }) public dialog!: IgxDialogComponent; + public grid1 = viewChild.required('grid1'); + public buttonGroup1 = viewChild.required('buttonGroup1'); + public buttonGroup2 = viewChild.required('buttonGroup2'); + public volumeSlider = viewChild.required('slider1'); + public intervalSlider = viewChild.required('slider2'); + public chart1 = viewChild.required('chart1'); + public dialog = viewChild.required('dialog'); public showToolbar = false; public properties: string[] = []; @@ -133,16 +134,17 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { private selectedButton = -1; private timer: any; private volumeChanged: any; - constructor( - private localData: LocalData, - private elRef: ElementRef, - private cdr: ChangeDetectorRef) { + private localData = inject(LocalData); + private elRef = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); + + constructor() { this.subscription = this.localData.getData(this.volume); this.localData.records.subscribe(x => { this.data = x; }); } public ngOnInit(): void { - this.grid1.groupingExpressions = [{ + this.grid1().groupingExpressions = [{ dir: SortingDirection.Desc, fieldName: 'Category', ignoreCase: false, @@ -161,7 +163,7 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { strategy: DefaultSortingStrategy.instance() } ]; - this.volumeChanged = this.volumeSlider.valueChange.pipe(debounce(() => timer(200))); + this.volumeChanged = this.volumeSlider().valueChange.pipe(debounce(() => timer(200))); this.volumeChanged.subscribe( () => { this.localData.getData(this.volume); @@ -170,8 +172,8 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } public ngAfterViewInit(): void { - this.grid1.hideGroupedColumns = true; - this.grid1.reflow(); + this.grid1().hideGroupedColumns = true; + this.grid1().reflow(); this.selectFirstGroupAndFillChart(); this.cdr.detectChanges(); } @@ -180,10 +182,10 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { this.properties = ['Price', 'Country']; this.setChartConfig('Countries', 'Prices (USD)', 'Data Chart with prices by Category and Country'); - if (this.grid1.groupsRecords[0].groups && this.grid1.groupsRecords[0]?.groups[0]?.groups) { - const recordsToBeSelected = this.grid1.selectionService.getRowIDs(this.grid1.groupsRecords[0].groups[0].groups[0].records); + if (this.grid1().groupsRecords[0].groups && this.grid1().groupsRecords[0]?.groups?.[0]?.groups) { + const recordsToBeSelected = this.grid1().selectionService.getRowIDs(this.grid1().groupsRecords[0].groups![0].groups![0].records); recordsToBeSelected.forEach(item => { - this.grid1.selectionService.selectRowById(item, false, true); + this.grid1().selectionService.selectRowById(item, false, true); }); } } @@ -192,22 +194,22 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { // update label interval and angle based on data this.setLabelIntervalAndAngle(); - this.chart1.xAxisTitle = xAsis; - this.chart1.yAxisTitle = yAxis; - this.chart1.chartTitle = title; + this.chart1().xAxisTitle = xAsis; + this.chart1().yAxisTitle = yAxis; + this.chart1().chartTitle = title; } public onButtonAction(evt: IButtonGroupEventArgs): void { switch (evt.index) { case 0: { this.disableOtherButtons(evt.index, true); - const currData = this.grid1.data; + const currData = this.grid1().data; this.timer = setInterval(() => this.ticker(currData), this.frequency); break; } case 1: { this.disableOtherButtons(evt.index, true); - const currData = this.grid1.data; + const currData = this.grid1().data; this.timer = setInterval(() => this.tickerAllPrices(currData), this.frequency); break; } @@ -218,7 +220,7 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } case 3: { this.disableOtherButtons(evt.index, true); - this.dialog.open(); + this.dialog().open(); break; } default: @@ -229,29 +231,29 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } public onCloseHandler(): void { - this.buttonGroup1.selectButton(2); - if (this.grid1.navigation.activeNode) { - if (this.grid1.navigation.activeNode.row === -1) { - this.grid1.theadRow.nativeElement.focus(); + this.buttonGroup1().selectButton(2); + if (this.grid1().navigation.activeNode) { + if (this.grid1().navigation.activeNode.row === -1) { + this.grid1().theadRow.nativeElement.focus(); } else { - this.grid1.tbody.nativeElement.focus(); + this.grid1().tbody.nativeElement.focus(); } } } public closeDialog(evt: KeyboardEvent): void { - if (this.dialog.isOpen && + if (this.dialog().isOpen && evt.shiftKey === true && evt.ctrlKey === true && evt.key.toLowerCase() === 'd') { evt.preventDefault(); - this.dialog.close(); + this.dialog().close(); } } public onChange(): void { - if (this.grid1.groupingExpressions.length > 0) { - this.grid1.groupingExpressions = []; + if (this.grid1().groupingExpressions.length > 0) { + this.grid1().groupingExpressions = []; } else { - this.grid1.groupingExpressions = [{ + this.grid1().groupingExpressions = [{ dir: SortingDirection.Desc, fieldName: 'Category', ignoreCase: false, @@ -274,13 +276,13 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } public rowSelectionChanging(args: IRowSelectionEventArgs): void { - this.grid1.clearCellSelection(); + this.grid1().clearCellSelection(); this.chartData = []; args.newSelection.forEach(row => { - if (this.grid1.data) { - this.chartData.push(this.grid1.data[row]); - this.chart1.notifyInsertItem(this.chartData, this.chartData.length - 1, - this.grid1.data[row]); + if (this.grid1().data) { + this.chartData.push(this.grid1().data![row]); + this.chart1().notifyInsertItem(this.chartData, this.chartData.length - 1, + this.grid1().data![row]); } }); this.setLabelIntervalAndAngle(); @@ -293,13 +295,13 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { this.chartData = this.data.filter(item => item.Region === cell.row.data.Region && item.Category === cell.row.data.Category); - this.chart1.notifyInsertItem(this.chartData, this.chartData.length - 1, {}); + this.chart1().notifyInsertItem(this.chartData, this.chartData.length - 1, {}); this.setLabelIntervalAndAngle(); - this.chart1.chartTitle = 'Data Chart with prices of ' + this.chartData[0].Category + ' in ' + + this.chart1().chartTitle = 'Data Chart with prices of ' + this.chartData[0].Category + ' in ' + this.chartData[0].Region + ' Region'; - this.dialog.open(); + this.dialog().open(); }, 200); } @@ -384,35 +386,35 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { public setLabelIntervalAndAngle(): void { const intervalSet = this.chartData.length; if (intervalSet < 10) { - this.chart1.xAxisLabelAngle = 0; - this.chart1.xAxisInterval = 1; + this.chart1().xAxisLabelAngle = 0; + this.chart1().xAxisInterval = 1; } else if (intervalSet < 15) { - this.chart1.xAxisLabelAngle = 30; - this.chart1.xAxisInterval = 1; + this.chart1().xAxisLabelAngle = 30; + this.chart1().xAxisInterval = 1; } else if (intervalSet < 40) { - this.chart1.xAxisLabelAngle = 90; - this.chart1.xAxisInterval = 1; + this.chart1().xAxisLabelAngle = 90; + this.chart1().xAxisInterval = 1; } else if (intervalSet < 100) { - this.chart1.xAxisLabelAngle = 90; - this.chart1.xAxisInterval = 3; + this.chart1().xAxisLabelAngle = 90; + this.chart1().xAxisInterval = 3; } else if (intervalSet < 200) { - this.chart1.xAxisLabelAngle = 90; - this.chart1.xAxisInterval = 5; + this.chart1().xAxisLabelAngle = 90; + this.chart1().xAxisInterval = 5; } else if (intervalSet < 400) { - this.chart1.xAxisLabelAngle = 90; - this.chart1.xAxisInterval = 7; + this.chart1().xAxisLabelAngle = 90; + this.chart1().xAxisInterval = 7; } else if (intervalSet > 400) { - this.chart1.xAxisLabelAngle = 90; - this.chart1.xAxisInterval = 10; + this.chart1().xAxisLabelAngle = 90; + this.chart1().xAxisInterval = 10; } - this.chart1.yAxisAbbreviateLargeNumbers = true; + this.chart1().yAxisAbbreviateLargeNumbers = true; } public gridKeydown(evt: KeyboardEvent): void { - if (this.grid1.selectedRows.length > 0 && + if (this.grid1().selectedRows.length > 0 && evt.shiftKey === true && evt.ctrlKey === true && evt.key.toLowerCase() === 'd') { evt.preventDefault(); - this.dialog.open(); + this.dialog().open(); } } @@ -422,7 +424,7 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { const type = args.targetType; if (type === 'dataCell' && target.column.field === 'Chart' && evt.key.toLowerCase() === 'enter') { - this.grid1.selectRows([target.row.key], true); + this.grid1().selectRows([target.row.key], true); this.openSingleRowChart(target); } } @@ -431,13 +433,13 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { if (this.subscription) { this.subscription.unsubscribe(); } - this.volumeSlider.disabled = disableButtons; - this.intervalSlider.disabled = disableButtons; + this.volumeSlider().disabled = disableButtons; + this.intervalSlider().disabled = disableButtons; this.selectedButton = ind; - this.buttonGroup1.buttons.forEach((button, index) => { + this.buttonGroup1().buttons.forEach((button, index) => { if (index === 2) { button.disabled = !disableButtons; } else { - this.buttonGroup1.buttons[0].disabled = disableButtons; - this.buttonGroup1.buttons[1].disabled = disableButtons; + this.buttonGroup1().buttons[0].disabled = disableButtons; + this.buttonGroup1().buttons[1].disabled = disableButtons; } }); } @@ -451,11 +453,11 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } private ticker(data: any): void { - this.grid1.data = this.updateRandomPrices(data); + this.grid1().data = this.updateRandomPrices(data); } private tickerAllPrices(data: any): void { - this.grid1.data = this.updateAllPrices(data); + this.grid1().data = this.updateAllPrices(data); } /** @@ -513,7 +515,7 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } get grouped(): boolean { - return this.grid1.groupingExpressions.length > 0; + return this.grid1().groupingExpressions.length > 0; } get buttonSelected(): number { diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.ts index cc1fb2427..4fef2b3c6 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.ts @@ -4,8 +4,8 @@ import { ElementRef, OnDestroy, OnInit, - ViewChild, - NgZone, + inject, + viewChild, } from '@angular/core'; import { AbsoluteScrollStrategy, @@ -63,10 +63,10 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; ] }) export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { - @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent; - @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent; - @ViewChild('slider1', { static: true }) public volumeSlider!: IgxSliderComponent; - @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent; + public grid1 = viewChild.required('grid1'); + public buttonGroup1 = viewChild.required('buttonGroup1'); + public volumeSlider = viewChild.required('slider1'); + public intervalSlider = viewChild.required('slider2'); public showToolbar = true; public selectionMode: GridSelectionMode = 'multiple'; @@ -139,14 +139,17 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { private timer: any; private volumeChanged: any; - constructor(private zone: NgZone, private localData: LocalData, private elRef: ElementRef) { + private localData = inject(LocalData); + private elRef = inject(ElementRef); + + constructor() { this.subscription = this.localData.getData(this.volume); this.localData.records.subscribe((d) => this.data = d); } public ngOnInit(): void { - this.grid1.sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }]; - this.volumeChanged = this.volumeSlider.valueChange.pipe(debounce(() => timer(200))); + this.grid1().sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }]; + this.volumeChanged = this.volumeSlider().valueChange.pipe(debounce(() => timer(200))); this.volumeChanged.subscribe( () => { this.localData.getData(this.volume); @@ -155,7 +158,7 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { } public ngAfterViewInit(): void { - this.grid1.reflow(); + this.grid1().reflow(); } public onButtonAction(evt: IButtonGroupEventArgs): void { switch (evt.index) { @@ -263,10 +266,10 @@ export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy { if (this.subscription) { this.subscription.unsubscribe(); } - this.volumeSlider.disabled = disableButtons; - this.intervalSlider.disabled = disableButtons; + this.volumeSlider().disabled = disableButtons; + this.intervalSlider().disabled = disableButtons; this.selectedButton = ind; - this.buttonGroup1.buttons.forEach((button, index) => { + this.buttonGroup1().buttons.forEach((button, index) => { if (index === 2) { button.disabled = !disableButtons; } else { button.disabled = disableButtons; } diff --git a/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.ts index 564806deb..e2911dd50 100644 --- a/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.ts @@ -1,7 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormBuilder, - FormGroup, Validators, ReactiveFormsModule, } from '@angular/forms'; @@ -31,27 +30,22 @@ import { ] }) export class <%=ClassName%> { - public loginForm: FormGroup; - public registrationForm: FormGroup; + private fb = inject(FormBuilder); + public loginForm = this.fb.group({ + email: ['', Validators.required], + password: ['', Validators.required] + }); + public registrationForm = this.fb.group({ + newEmail: ['', Validators.required], + newPassword: ['', Validators.required], + firstName: ['', Validators.required], + lastName: ['', Validators.required] + }); public showLogin = true; public showRegister = false; public showSuccessLogin = false; public showSuccessRegister = false; - constructor(fb: FormBuilder) { - this.loginForm = fb.group( { - email: ['', Validators.required], - password: ['', Validators.required] - }); - - this.registrationForm = fb.group( { - newEmail: ['', Validators.required], - newPassword: ['', Validators.required], - firstName: ['', Validators.required], - lastName: ['', Validators.required] - }); - } - tryLogin() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const loginInfo = this.loginForm.value; diff --git a/packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.ts index fcb6c5a95..4be749560 100644 --- a/packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, viewChild } from '@angular/core'; import { IgxExpansionPanelComponent, IgxCardComponent, @@ -27,11 +27,10 @@ import { data as weatherData } from './weather-data'; ] }) export class <%=ClassName%> { - @ViewChild(IgxExpansionPanelComponent, { static: true }) - public panel!: IgxExpansionPanelComponent; + public panel = viewChild.required(IgxExpansionPanelComponent); public data = weatherData; public toggleDetails() { - this.panel.toggle(); + this.panel().toggle(); } } diff --git a/packages/igx-templates/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.ts index b2a8a1bbe..0c730d4cf 100644 --- a/packages/igx-templates/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, viewChild } from '@angular/core'; import { IgxDialogComponent, IgxGridComponent, @@ -33,16 +33,16 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; ] }) export class <%=ClassName%> implements OnInit { - @ViewChild('gridRowEditTransaction', { static: true, read: IgxGridComponent }) public grid!: IgxGridComponent; - @ViewChild(IgxDialogComponent, { static: true }) public dialog!: IgxDialogComponent; - @ViewChild('dialogGrid', { static: true, read: IgxGridComponent }) public dialogGrid!: IgxGridComponent; + public grid = viewChild.required('gridRowEditTransaction', { read: IgxGridComponent }); + public dialog = viewChild.required(IgxDialogComponent); + public dialogGrid = viewChild.required('dialogGrid', { read: IgxGridComponent }); public data: Product[]; public transactionsData: Transaction[] = []; private addProductId: number; public get transactions(): TransactionService { - return this.grid.transactions; + return this.grid().transactions; } constructor() { @@ -52,7 +52,7 @@ export class <%=ClassName%> implements OnInit { public ngOnInit(): void { this.transactionsData = this.transactions.getAggregatedChanges(true); - this.grid.rendered$.subscribe(() => { + this.grid().rendered$.subscribe(() => { this.transactions.onStateUpdate?.subscribe(() => { this.transactionsData = this.transactions.getAggregatedChanges(true); }) @@ -60,7 +60,7 @@ export class <%=ClassName%> implements OnInit { } public addRow(): void { - this.grid.addRow({ + this.grid().addRow({ CategoryID: this.getRandomInt(1, 10), Discontinued: this.getRandomInt(1, 10) % 2 === 0, OrderDate: new Date(this.getRandomInt(2000, 2050), this.getRandomInt(0, 11), this.getRandomInt(1, 25)), @@ -80,26 +80,26 @@ export class <%=ClassName%> implements OnInit { } public deleteRow(rowID: any): void { - this.grid.deleteRow(rowID); + this.grid().deleteRow(rowID); } public openCommitDialog(): void { - this.dialog.open(); - this.dialogGrid.reflow(); + this.dialog().open(); + this.dialogGrid().reflow(); } public commit(): void { - this.grid.transactions.commit(this.data); - this.dialog.close(); + this.grid().transactions.commit(this.data); + this.dialog().close(); } public cancel(): void { - this.dialog.close(); + this.dialog().close(); } public discard(): void { - this.grid.transactions.clear(); - this.dialog.close(); + this.grid().transactions.clear(); + this.dialog().close(); } private getRandomInt(min: number, max: number): number { @@ -107,7 +107,7 @@ export class <%=ClassName%> implements OnInit { } public get hasTransactions(): boolean { - return this.grid.transactions.getAggregatedChanges(false).length > 0; + return this.grid().transactions.getAggregatedChanges(false).length > 0; } public stateFormatter(value: string): string { diff --git a/packages/igx-templates/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts index 19b019a3f..7e226faed 100644 --- a/packages/igx-templates/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, OnInit, viewChild, ViewEncapsulation } from '@angular/core'; import { IgxDateSummaryOperand, IgxGridComponent, @@ -24,8 +24,7 @@ import { Employee, employeesData } from './localData'; ] }) export class <%=ClassName%> implements OnInit { - @ViewChild('sampleGrid', { static: true, read: IgxGridComponent }) - public sampleGrid!: IgxGridComponent; + public sampleGrid = viewChild.required('sampleGrid', { read: IgxGridComponent }); public customDateSummary = CustomDateSummary; public localData!: Employee[]; @@ -40,10 +39,10 @@ export class <%=ClassName%> implements OnInit { } public toggleSummary(name: string): void { - if (this.sampleGrid.getColumnByName(name).hasSummary) { - this.sampleGrid.disableSummaries(name); + if (this.sampleGrid().getColumnByName(name).hasSummary) { + this.sampleGrid().disableSummaries(name); } else { - this.sampleGrid.enableSummaries(name); + this.sampleGrid().enableSummaries(name); } } } diff --git a/packages/igx-templates/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.ts index 6d8fdc25e..4b2ffde01 100644 --- a/packages/igx-templates/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, viewChild } from '@angular/core'; import { IgxDialogComponent, IgxGridComponent, @@ -44,19 +44,19 @@ import { Singer } from './singer'; }) export class <%=ClassName%> { public get undoEnabledParent(): boolean { - return this.hierarchicalGrid.transactions.canUndo; + return this.hierarchicalGrid().transactions.canUndo; } public get redoEnabledParent(): boolean { - return this.hierarchicalGrid.transactions.canRedo; + return this.hierarchicalGrid().transactions.canRedo; } public get hasTransactions(): boolean { - return this.hierarchicalGrid.transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions; + return this.hierarchicalGrid().transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions; } public get hasChildTransactions(): boolean { - return this.layout1.gridAPI.getChildGrids() + return this.layout1().gridAPI.getChildGrids() .find(c => c.transactions.getAggregatedChanges(false).length > 0) !== undefined; } @@ -72,20 +72,15 @@ export class <%=ClassName%> { HasGrammyAward: false }; - @ViewChild('dialogChanges', { read: IgxDialogComponent, static: true }) - public dialogChanges!: IgxDialogComponent; + public dialogChanges = viewChild.required('dialogChanges', { read: IgxDialogComponent }); - @ViewChild('dialogGrid', { read: IgxGridComponent, static: true }) - public dialogGrid!: IgxGridComponent; + public dialogGrid = viewChild.required('dialogGrid', { read: IgxGridComponent }); - @ViewChild('layout1', { static: true }) - private layout1!: IgxRowIslandComponent; + private layout1 = viewChild.required('layout1'); - @ViewChild('hierarchicalGrid', { static: true }) - private hierarchicalGrid!: IgxHierarchicalGridComponent; + private hierarchicalGrid = viewChild.required('hierarchicalGrid'); - @ViewChild('dialogAddSinger', { read: IgxDialogComponent, static: true }) - private dialogSinger!: IgxDialogComponent; + private dialogSinger = viewChild.required('dialogAddSinger', { read: IgxDialogComponent }); public formatter = (a: number): number => a; @@ -100,38 +95,38 @@ export class <%=ClassName%> { } public commit(): void { - this.hierarchicalGrid.transactions.commit(this.localdata); - this.layout1.gridAPI.getChildGrids().forEach((grid) => { + this.hierarchicalGrid().transactions.commit(this.localdata); + this.layout1().gridAPI.getChildGrids().forEach((grid) => { grid.transactions.commit(grid.data as any[]); }); - this.dialogChanges.close(); + this.dialogChanges().close(); } public discard(): void { - this.hierarchicalGrid.transactions.clear(); - this.layout1.gridAPI.getChildGrids().forEach((grid) => { + this.hierarchicalGrid().transactions.clear(); + this.layout1().gridAPI.getChildGrids().forEach((grid) => { grid.transactions.clear(); }); - this.dialogChanges.close(); + this.dialogChanges().close(); } public openCommitDialog(): void { - this.transactionsDataAll = [...this.hierarchicalGrid.transactions.getAggregatedChanges(true)]; - this.layout1.gridAPI.getChildGrids().forEach((grid) => { + this.transactionsDataAll = [...this.hierarchicalGrid().transactions.getAggregatedChanges(true)]; + this.layout1().gridAPI.getChildGrids().forEach((grid) => { this.transactionsDataAll = this.transactionsDataAll.concat(grid.transactions.getAggregatedChanges(true)); }); - this.dialogChanges.open(); - this.dialogGrid.reflow(); + this.dialogChanges().open(); + this.dialogGrid().reflow(); } public addSinger(): void { - this.hierarchicalGrid.addRow(this.singer); + this.hierarchicalGrid().addRow(this.singer); ++this.id; this.cancel(); } public removeRow(rowIndex: number): void { - const row = this.hierarchicalGrid.getRowByIndex(rowIndex); + const row = this.hierarchicalGrid().getRowByIndex(rowIndex); if (row && row.delete) { row.delete(); } @@ -150,8 +145,8 @@ export class <%=ClassName%> { } public cancel(): void { - this.dialogChanges.close(); - this.dialogSinger.close(); + this.dialogChanges().close(); + this.dialogSinger().close(); this.singer = { ID: this.id, Artist: 'Mock Jagger', diff --git a/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts index cb1c2158f..0a5b9f491 100644 --- a/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; import { IgxSelectComponent, @@ -58,7 +58,7 @@ export class <%=ClassName%> implements OnInit { public minDate = new Date(); public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14)); - constructor(private fb: FormBuilder) { } + private fb = inject(FormBuilder); public ngOnInit(): void { this.genres = [ diff --git a/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts index e18d4400f..a0b1898ad 100644 --- a/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, Component, viewChild, ViewEncapsulation } from '@angular/core'; import { IgxLayoutDirective, IgxButtonDirective } from '<%=igxPackage%>'; import { IgxLinearGaugeComponent, @@ -17,43 +17,42 @@ import { export class <%=ClassName%> implements AfterViewInit { public needleShape = LinearGraphNeedleShape - @ViewChild('linearGauge', { static: true }) - public linearGauge!: IgxLinearGaugeComponent; + public linearGauge = viewChild.required('linearGauge'); public ngAfterViewInit(): void { // enabling animation duration (in milliseconds) - this.linearGauge.transitionDuration = 500; + this.linearGauge().transitionDuration = 500; this.animateToGauge3(); } public animateToGauge3(): void { // linear gauge requires settings for these properties: - this.linearGauge.minimumValue = 0; - this.linearGauge.maximumValue = 100; - this.linearGauge.value = 50; - this.linearGauge.interval = 10; + this.linearGauge().minimumValue = 0; + this.linearGauge().maximumValue = 100; + this.linearGauge().value = 50; + this.linearGauge().interval = 10; // setting custom appearance of labels - this.linearGauge.labelInterval = 10; - this.linearGauge.labelExtent = 0.05; + this.linearGauge().labelInterval = 10; + this.linearGauge().labelExtent = 0.05; // setting custom appearance of needle - this.linearGauge.isNeedleDraggingEnabled = true; - this.linearGauge.needleShape = LinearGraphNeedleShape.Needle; - this.linearGauge.needleBrush = '#79797a'; - this.linearGauge.needleOutline = '#ffffffff'; - this.linearGauge.needleStrokeThickness = 1; - this.linearGauge.needleOuterExtent = 0.9; - this.linearGauge.needleInnerExtent = 0.3; + this.linearGauge().isNeedleDraggingEnabled = true; + this.linearGauge().needleShape = LinearGraphNeedleShape.Needle; + this.linearGauge().needleBrush = '#79797a'; + this.linearGauge().needleOutline = '#ffffffff'; + this.linearGauge().needleStrokeThickness = 1; + this.linearGauge().needleOuterExtent = 0.9; + this.linearGauge().needleInnerExtent = 0.3; // setting custom appearance of major/minor ticks - this.linearGauge.minorTickCount = 5; - this.linearGauge.minorTickEndExtent = 0.10; - this.linearGauge.minorTickStartExtent = 0.20; - this.linearGauge.minorTickStrokeThickness = 1; - this.linearGauge.tickStartExtent = 0.25; - this.linearGauge.tickEndExtent = 0.05; - this.linearGauge.tickStrokeThickness = 2; + this.linearGauge().minorTickCount = 5; + this.linearGauge().minorTickEndExtent = 0.10; + this.linearGauge().minorTickStartExtent = 0.20; + this.linearGauge().minorTickStrokeThickness = 1; + this.linearGauge().tickStartExtent = 0.25; + this.linearGauge().tickEndExtent = 0.05; + this.linearGauge().tickStrokeThickness = 2; // setting custom gauge ranges const range1 = new IgxLinearGraphRangeComponent(); @@ -66,16 +65,16 @@ export class <%=ClassName%> implements AfterViewInit { range3.startValue = 70; range3.endValue = 100; - this.linearGauge.rangeBrushes = ['#9FB328', '#438C47', '#3F51B5']; - this.linearGauge.rangeOutlines = ['#9FB328', '#438C47', '#3F51B5']; - this.linearGauge.ranges.clear(); - this.linearGauge.ranges.add(range1); - this.linearGauge.ranges.add(range2); - this.linearGauge.ranges.add(range3); + this.linearGauge().rangeBrushes = ['#9FB328', '#438C47', '#3F51B5']; + this.linearGauge().rangeOutlines = ['#9FB328', '#438C47', '#3F51B5']; + this.linearGauge().ranges.clear(); + this.linearGauge().ranges.add(range1); + this.linearGauge().ranges.add(range2); + this.linearGauge().ranges.add(range3); // setting extent of all gauge ranges - for(let i = 0; i implements AfterViewInit { } // setting extent of gauge scale - this.linearGauge.scaleStrokeThickness = 0; - this.linearGauge.scaleBrush = '#ffffff'; - this.linearGauge.scaleOutline = '#dbdbdb'; - this.linearGauge.scaleInnerExtent = 0.075; - this.linearGauge.scaleOuterExtent = 0.85; - this.linearGauge.scaleStartExtent = 0.05; - this.linearGauge.scaleEndExtent = 0.95; + this.linearGauge().scaleStrokeThickness = 0; + this.linearGauge().scaleBrush = '#ffffff'; + this.linearGauge().scaleOutline = '#dbdbdb'; + this.linearGauge().scaleInnerExtent = 0.075; + this.linearGauge().scaleOuterExtent = 0.85; + this.linearGauge().scaleStartExtent = 0.05; + this.linearGauge().scaleEndExtent = 0.95; // setting appearance of backing fill and outline - this.linearGauge.backingBrush = '#ffffff'; - this.linearGauge.backingOutline = '#d1d1d1'; - this.linearGauge.backingStrokeThickness = 0; + this.linearGauge().backingBrush = '#ffffff'; + this.linearGauge().backingOutline = '#d1d1d1'; + this.linearGauge().backingStrokeThickness = 0; } public animateToGauge2(): void { // linear gauge requires settings for these properties: - this.linearGauge.minimumValue = 100; - this.linearGauge.maximumValue = 200; - this.linearGauge.value = 150; - this.linearGauge.interval = 20; + this.linearGauge().minimumValue = 100; + this.linearGauge().maximumValue = 200; + this.linearGauge().value = 150; + this.linearGauge().interval = 20; // setting custom appearance of labels - this.linearGauge.labelInterval = 20; - this.linearGauge.labelExtent = 0.05; + this.linearGauge().labelInterval = 20; + this.linearGauge().labelExtent = 0.05; // setting custom appearance of needle - this.linearGauge.isNeedleDraggingEnabled = true; - this.linearGauge.needleShape = LinearGraphNeedleShape.Triangle; - this.linearGauge.needleBrush = '#79797a'; - this.linearGauge.needleOutline = '#ffffffff'; - this.linearGauge.needleStrokeThickness = 1; - this.linearGauge.needleOuterExtent = 0.9; - this.linearGauge.needleInnerExtent = 0.3; + this.linearGauge().isNeedleDraggingEnabled = true; + this.linearGauge().needleShape = LinearGraphNeedleShape.Triangle; + this.linearGauge().needleBrush = '#79797a'; + this.linearGauge().needleOutline = '#ffffffff'; + this.linearGauge().needleStrokeThickness = 1; + this.linearGauge().needleOuterExtent = 0.9; + this.linearGauge().needleInnerExtent = 0.3; // setting custom appearance of major/minor ticks - this.linearGauge.minorTickCount = 4; - this.linearGauge.minorTickEndExtent = 0.10; - this.linearGauge.minorTickStartExtent = 0.20; - this.linearGauge.minorTickStrokeThickness = 1; - this.linearGauge.tickStartExtent = 0.25; - this.linearGauge.tickEndExtent = 0.05; - this.linearGauge.tickStrokeThickness = 2; + this.linearGauge().minorTickCount = 4; + this.linearGauge().minorTickEndExtent = 0.10; + this.linearGauge().minorTickStartExtent = 0.20; + this.linearGauge().minorTickStrokeThickness = 1; + this.linearGauge().tickStartExtent = 0.25; + this.linearGauge().tickEndExtent = 0.05; + this.linearGauge().tickStrokeThickness = 2; // setting custom gauge ranges const range1 = new IgxLinearGraphRangeComponent(); @@ -141,17 +140,17 @@ export class <%=ClassName%> implements AfterViewInit { range4.startValue = 175; range4.endValue = 200; - this.linearGauge.rangeBrushes = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; - this.linearGauge.rangeOutlines = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; - this.linearGauge.ranges.clear(); - this.linearGauge.ranges.add(range1); - this.linearGauge.ranges.add(range2); - this.linearGauge.ranges.add(range3); - this.linearGauge.ranges.add(range4); + this.linearGauge().rangeBrushes = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; + this.linearGauge().rangeOutlines = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF']; + this.linearGauge().ranges.clear(); + this.linearGauge().ranges.add(range1); + this.linearGauge().ranges.add(range2); + this.linearGauge().ranges.add(range3); + this.linearGauge().ranges.add(range4); // setting extent of all gauge ranges - for(let i = 0; i implements AfterViewInit { } // setting extent of gauge scale - this.linearGauge.scaleStrokeThickness = 0; - this.linearGauge.scaleBrush = '#ffffff'; - this.linearGauge.scaleOutline = '#dbdbdb'; - this.linearGauge.scaleInnerExtent = 0.075; - this.linearGauge.scaleOuterExtent = 0.85; - this.linearGauge.scaleStartExtent = 0.05; - this.linearGauge.scaleEndExtent = 0.95; + this.linearGauge().scaleStrokeThickness = 0; + this.linearGauge().scaleBrush = '#ffffff'; + this.linearGauge().scaleOutline = '#dbdbdb'; + this.linearGauge().scaleInnerExtent = 0.075; + this.linearGauge().scaleOuterExtent = 0.85; + this.linearGauge().scaleStartExtent = 0.05; + this.linearGauge().scaleEndExtent = 0.95; // setting appearance of backing fill and outline - this.linearGauge.backingBrush = '#ffffff'; - this.linearGauge.backingOutline = '#d1d1d1'; - this.linearGauge.backingStrokeThickness = 0; + this.linearGauge().backingBrush = '#ffffff'; + this.linearGauge().backingOutline = '#d1d1d1'; + this.linearGauge().backingStrokeThickness = 0; } public animateToGauge1(): void { // linear gauge requires settings for these properties: - this.linearGauge.minimumValue = 0; - this.linearGauge.maximumValue = 80; - this.linearGauge.value = 60; - this.linearGauge.interval = 20; + this.linearGauge().minimumValue = 0; + this.linearGauge().maximumValue = 80; + this.linearGauge().value = 60; + this.linearGauge().interval = 20; // setting custom appearance of labels - this.linearGauge.labelInterval = 20; - this.linearGauge.labelExtent = 0.05; + this.linearGauge().labelInterval = 20; + this.linearGauge().labelExtent = 0.05; // setting custom appearance of needle - this.linearGauge.isNeedleDraggingEnabled = true; - this.linearGauge.needleShape = LinearGraphNeedleShape.Trapezoid; - this.linearGauge.needleBrush = '#79797a'; - this.linearGauge.needleOutline = '#ffffffff'; - this.linearGauge.needleStrokeThickness = 1; - this.linearGauge.needleOuterExtent = 0.9; - this.linearGauge.needleInnerExtent = 0.3; + this.linearGauge().isNeedleDraggingEnabled = true; + this.linearGauge().needleShape = LinearGraphNeedleShape.Trapezoid; + this.linearGauge().needleBrush = '#79797a'; + this.linearGauge().needleOutline = '#ffffffff'; + this.linearGauge().needleStrokeThickness = 1; + this.linearGauge().needleOuterExtent = 0.9; + this.linearGauge().needleInnerExtent = 0.3; // setting custom appearance of major/minor ticks - this.linearGauge.minorTickCount = 5; - this.linearGauge.minorTickEndExtent = 0.10; - this.linearGauge.minorTickStartExtent = 0.20; - this.linearGauge.minorTickStrokeThickness = 1; - this.linearGauge.tickStartExtent = 0.25; - this.linearGauge.tickEndExtent = 0.05; - this.linearGauge.tickStrokeThickness = 2; + this.linearGauge().minorTickCount = 5; + this.linearGauge().minorTickEndExtent = 0.10; + this.linearGauge().minorTickStartExtent = 0.20; + this.linearGauge().minorTickStrokeThickness = 1; + this.linearGauge().tickStartExtent = 0.25; + this.linearGauge().tickEndExtent = 0.05; + this.linearGauge().tickStrokeThickness = 2; // setting custom gauge ranges const range1 = new IgxLinearGraphRangeComponent(); @@ -210,15 +209,15 @@ export class <%=ClassName%> implements AfterViewInit { range2.startValue = 40; range2.endValue = 80; - this.linearGauge.rangeBrushes = ['#a4bd29', '#F86232']; - this.linearGauge.rangeOutlines = ['#a4bd29', '#F86232']; - this.linearGauge.ranges.clear(); - this.linearGauge.ranges.add(range1); - this.linearGauge.ranges.add(range2); + this.linearGauge().rangeBrushes = ['#a4bd29', '#F86232']; + this.linearGauge().rangeOutlines = ['#a4bd29', '#F86232']; + this.linearGauge().ranges.clear(); + this.linearGauge().ranges.add(range1); + this.linearGauge().ranges.add(range2); // setting extent of all gauge ranges - for(let i = 0; i implements AfterViewInit { } // setting extent of gauge scale - this.linearGauge.scaleStrokeThickness = 0; - this.linearGauge.scaleBrush = '#ffffff'; - this.linearGauge.scaleOutline = '#dbdbdb'; - this.linearGauge.scaleInnerExtent = 0.075; - this.linearGauge.scaleOuterExtent = 0.85; - this.linearGauge.scaleStartExtent = 0.05; - this.linearGauge.scaleEndExtent = 0.95; + this.linearGauge().scaleStrokeThickness = 0; + this.linearGauge().scaleBrush = '#ffffff'; + this.linearGauge().scaleOutline = '#dbdbdb'; + this.linearGauge().scaleInnerExtent = 0.075; + this.linearGauge().scaleOuterExtent = 0.85; + this.linearGauge().scaleStartExtent = 0.05; + this.linearGauge().scaleEndExtent = 0.95; // setting appearance of backing fill and outline - this.linearGauge.backingBrush = '#ffffff'; - this.linearGauge.backingOutline = '#d1d1d1'; - this.linearGauge.backingStrokeThickness = 0; + this.linearGauge().backingBrush = '#ffffff'; + this.linearGauge().backingOutline = '#d1d1d1'; + this.linearGauge().backingStrokeThickness = 0; } } diff --git a/packages/igx-templates/igx-ts/map/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/map/default/files/src/app/__path__/__filePrefix__.ts index 41ead526e..56a23bf68 100644 --- a/packages/igx-templates/igx-ts/map/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/map/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, viewChild } from '@angular/core'; import { IgxGeographicMapComponent, IgxGeographicMapCoreModule } from 'igniteui-angular-maps'; @Component({ @@ -9,10 +9,9 @@ import { IgxGeographicMapComponent, IgxGeographicMapCoreModule } from 'igniteui- }) export class <%=ClassName%> implements AfterViewInit { - @ViewChild('map', {static: true}) - public map!: IgxGeographicMapComponent; + public map = viewChild.required('map'); public ngAfterViewInit(): void { - this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 }; + this.map().windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 }; } } diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts index 38c632f6e..410c4549f 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, OnInit, viewChild, ViewEncapsulation, inject } from '@angular/core'; import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; import { IgxNavigationDrawerComponent, @@ -38,10 +38,11 @@ export class App implements OnInit { name: string }[] = []; - @ViewChild(IgxNavigationDrawerComponent, { static: true }) - public navdrawer!: IgxNavigationDrawerComponent; + public navdrawer = viewChild.required(IgxNavigationDrawerComponent); - constructor(private router: Router) { + private router = inject(Router); + + constructor() { for (const route of routes) { if (route.path && route.data && route.path.indexOf('*') === -1) { this.topNavLinks.push({ @@ -57,9 +58,9 @@ export class App implements OnInit { filter((x): x is NavigationStart => x instanceof NavigationStart) ) .subscribe((event: NavigationStart) => { - if (event.url !== '/' && !this.navdrawer.pin) { + if (event.url !== '/' && !this.navdrawer().pin) { // Close drawer when selecting a view on mobile (unpinned) - this.navdrawer.close(); + this.navdrawer().close(); } }); } diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts index 53d957c23..83bcdd910 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; import { UserStore } from './services/user-store'; @@ -6,7 +6,8 @@ import { UserStore } from './services/user-store'; providedIn: 'root' }) export class AuthGuard implements CanActivate { - constructor(private router: Router, private userStore: UserStore) { } + private router = inject(Router); + private userStore = inject(UserStore); canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (this.userStore.currentUser) { diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts index 666c36d68..c47cd5044 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, inject, viewChild } from '@angular/core'; import { Router } from '@angular/router'; import { IgxDropDownComponent, ISelectionEventArgs, IgxRippleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxAvatarComponent, IgxIconComponent, IgxDropDownItemComponent } from 'igniteui-angular'; @@ -15,20 +15,16 @@ import { UserStore } from '../services/user-store'; }) export class LoginBar { - @ViewChild(LoginDialog, { static: true }) - loginDialog!: LoginDialog; + loginDialog = viewChild.required(LoginDialog); - @ViewChild(IgxDropDownComponent, { static: true }) - igxDropDown!: IgxDropDownComponent; + igxDropDown = viewChild.required(IgxDropDownComponent); - constructor( - public userStore: UserStore, - private externalAuth: ExternalAuth, - private router: Router) { - } + public userStore = inject(UserStore); + private externalAuth = inject(ExternalAuth); + private router = inject(Router); openDialog() { - this.loginDialog.open(); + this.loginDialog().open(); } handleLogout() { diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.spec.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.spec.ts index 739cb82b7..eaf19b1f5 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.spec.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, EventEmitter, Output } from '@angular/core'; +import { Component, DebugElement, output } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -12,9 +12,9 @@ import { LoginDialog } from './login-dialog'; imports: [IgxDialogModule] }) class TestSignViewComponent { - @Output() public viewChange = new EventEmitter(); - @Output() public loggedIn = new EventEmitter(); - @Output() public registered = new EventEmitter(); + public viewChange = output(); + public loggedIn = output(); + public registered = output(); } describe('LoginDialog', () => { @@ -55,7 +55,7 @@ describe('LoginDialog', () => { result = checkViews(); expect(result.loginView).toBeNull(); expect(result.registerView).not.toBeNull(); - expect(component.loginDialog.title).toEqual('Register'); + expect(component.loginDialog().title).toEqual('Register'); component.open(); await fixture.whenStable(); @@ -64,22 +64,22 @@ describe('LoginDialog', () => { expect(result.loginView).not.toBeNull(); expect(result.registerView).toBeNull(); expect(component.showLogin).toBeTruthy(); - expect(component.loginDialog.title).toEqual('Login'); + expect(component.loginDialog().title).toEqual('Login'); }); it('should switch views, close on events', () => { let view: TestSignViewComponent = fixture.debugElement.query(By.css('app-login')).componentInstance; - vi.spyOn(component.loginDialog, 'close'); + vi.spyOn(component.loginDialog(), 'close'); view.viewChange.emit(); expect(component.showLogin).toBeFalsy(); view.loggedIn.emit(); - expect(component.loginDialog.close).toHaveBeenCalledTimes(1); + expect(component.loginDialog().close).toHaveBeenCalledTimes(1); fixture.detectChanges(); view = fixture.debugElement.query(By.css('app-register')).componentInstance; view.viewChange.emit(); expect(component.showLogin).toBeTruthy(); view.registered.emit(); - expect(component.loginDialog.close).toHaveBeenCalledTimes(2); + expect(component.loginDialog().close).toHaveBeenCalledTimes(2); }); }); diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts index 567b8e296..f2232b592 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, viewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular'; import { Register } from '../register/register'; @@ -13,15 +13,14 @@ import { Login } from '../login/login'; export class LoginDialog { public showLogin = true; public get title() { return this.showLogin ? 'Login' : 'Register'; } - @ViewChild(IgxDialogComponent, { static: true }) - public loginDialog!: IgxDialogComponent; + public loginDialog = viewChild.required(IgxDialogComponent); open() { - this.loginDialog.open(); + this.loginDialog().open(); } close() { - this.loginDialog.close(); + this.loginDialog().close(); } onOpen() { diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.ts index 1d1848627..3b6f8d36b 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.ts @@ -1,5 +1,5 @@ -import { Component, EventEmitter, Output } from '@angular/core'; -import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import { Component, inject, output } from '@angular/core'; +import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms'; import { Router } from '@angular/router'; import { IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; @@ -17,22 +17,21 @@ import { UserStore } from '../services/user-store'; IgxInputDirective, IgxButtonDirective, IgxRippleDirective] }) export class Login { - public loginForm: FormGroup; - @Output() public viewChange: EventEmitter = new EventEmitter(); - @Output() public loggedIn: EventEmitter = new EventEmitter(); + public externalAuth = inject(ExternalAuth); + private authentication = inject(Authentication); + private userStore = inject(UserStore); + private router = inject(Router); + private fb = inject(FormBuilder); + + public loginForm = this.fb.group({ + email: ['', Validators.required], + password: ['', Validators.required], + }); + public viewChange = output(); + public loggedIn = output(); /** expose to template */ public providers = ExternalAuthProvider; - constructor( - public externalAuth: ExternalAuth, private authentication: Authentication, - private userStore: UserStore, private router: Router, fb: FormBuilder - ) { - this.loginForm = fb.group({ - email: ['', Validators.required], - password: ['', Validators.required], - }); - } - signUpG() { this.externalAuth.login(ExternalAuthProvider.Google); } diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.ts index bd24aeaf5..82424422a 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { UserStore } from '../services/user-store'; @Component({ @@ -7,5 +7,5 @@ import { UserStore } from '../services/user-store'; styleUrl: './profile.scss' }) export class Profile { - constructor(public userStore: UserStore) { } + public userStore = inject(UserStore); } diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/redirect/redirect.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/redirect/redirect.ts index 4e8fefef7..71fbd13c2 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/redirect/redirect.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/redirect/redirect.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { OidcSecurityService } from 'angular-auth-oidc-client'; import { firstValueFrom } from 'rxjs'; @@ -12,16 +12,16 @@ import { UserStore } from '../services/user-store'; template: '

Signing in...

' }) export class Redirect implements OnInit { + private route = inject(ActivatedRoute); + private router = inject(Router); + private userStore = inject(UserStore); + private authentication = inject(Authentication); + private externalAuth = inject(ExternalAuth); + private oidcSecurityService = inject(OidcSecurityService); private provider: ExternalAuthProvider; - constructor( - route: ActivatedRoute, - private router: Router, - private userStore: UserStore, - private authentication: Authentication, - private externalAuth: ExternalAuth, - private oidcSecurityService: OidcSecurityService) { - this.provider = route.snapshot.data['provider'] as ExternalAuthProvider; + constructor() { + this.provider = this.route.snapshot.data['provider'] as ExternalAuthProvider; } async ngOnInit() { diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/register/register.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/register/register.ts index d536aa1ee..9437f59d9 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/register/register.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/register/register.ts @@ -1,5 +1,5 @@ -import { Component, EventEmitter, Output } from '@angular/core'; -import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import { Component, inject, output } from '@angular/core'; +import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms'; import { Router } from '@angular/router'; import { IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; @@ -16,24 +16,20 @@ import { UserStore } from '../services/user-store'; }) export class Register { - public registrationForm: FormGroup; + private authentication = inject(Authentication); + private fb = inject(FormBuilder); + private userStore = inject(UserStore); + private router = inject(Router); - @Output() - viewChange: EventEmitter = new EventEmitter(); - @Output() - registered: EventEmitter = new EventEmitter(); + public registrationForm = this.fb.group({ + given_name: ['', Validators.required], + family_name: ['', Validators.nullValidator], + email: ['', Validators.required], + password: ['', Validators.required] + }); - constructor(private authentication: Authentication, - private fb: FormBuilder, - private userStore: UserStore, - private router: Router) { - this.registrationForm = this.fb.group({ - given_name: ['', Validators.required], - family_name: ['', Validators.nullValidator], - email: ['', Validators.required], - password: ['', Validators.required] - }); - } + viewChange = output(); + registered = output(); async tryRegister() { const response = await this.authentication.register(this.registrationForm.value as RegisterInfo); diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts index 7edd93f7b..f644e88b0 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts @@ -1,5 +1,5 @@ import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { ExternalLogin, Login } from '../models/login'; import { RegisterInfo } from '../models/register-info'; import { LoginResult, User } from '../models/user'; @@ -11,7 +11,7 @@ import { parseUser } from './jwt-util'; }) export class Authentication { - constructor(private http: HttpClient) { } + private http = inject(HttpClient); /** Send basic credentials to login endpoint. */ public async login(userData: Login): Promise { diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth.ts index 130a48ede..42548888e 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth.ts @@ -1,5 +1,5 @@ import { Location } from '@angular/common'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { OidcSecurityService } from 'angular-auth-oidc-client'; import { ExternalLogin } from '../models/login'; @@ -20,6 +20,11 @@ export enum ExternalAuthRedirectUrl { providedIn: 'root' }) export class ExternalAuth { + private router = inject(Router); + private oidcSecurityService = inject(OidcSecurityService); + private location = inject(Location); + private localStorage = inject(LocalStorageService); + protected providers: Map = new Map(); public get activeProvider(): ExternalAuthProvider { return this.localStorage.getItem('extActiveProvider') as ExternalAuthProvider; @@ -28,13 +33,6 @@ export class ExternalAuth { this.localStorage.setItem('extActiveProvider', provider); } - constructor( - private router: Router, - private oidcSecurityService: OidcSecurityService, - private location: Location, - private localStorage: LocalStorageService) { - } - public hasProvider(provider?: ExternalAuthProvider) { if (provider) { return this.providers.has(provider); diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/fake-backend.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/fake-backend.ts index 8285594f8..c87a08b89 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/fake-backend.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/fake-backend.ts @@ -6,7 +6,7 @@ import { HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Observable, of, throwError } from 'rxjs'; import { dematerialize, materialize, mergeMap } from 'rxjs/operators'; import { ExternalLogin } from '../models/login'; @@ -21,8 +21,7 @@ import msKeys from './microsoft-keys'; }) export class BackendInterceptor implements HttpInterceptor { users: StorageUser[] = []; - - constructor(private localStorage: LocalStorageService) { } + private localStorage = inject(LocalStorageService); intercept(request: HttpRequest, next: HttpHandler): Observable> { const storedUsers = this.localStorage.getItem('users'); diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/jwt.interceptor.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/jwt.interceptor.ts index 8e62c8b7b..a95d90557 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/jwt.interceptor.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/jwt.interceptor.ts @@ -1,5 +1,5 @@ import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { UserStore } from '../services/user-store'; @@ -7,7 +7,7 @@ import { UserStore } from '../services/user-store'; providedIn: 'root' }) export class JwtInterceptor implements HttpInterceptor { - constructor(private userStore: UserStore) { } + private userStore = inject(UserStore); intercept(request: HttpRequest, next: HttpHandler): Observable> { const currentUser = this.userStore.currentUser; diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/local-storage.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/local-storage.ts index 118d4fa89..1859405c8 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/local-storage.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/local-storage.ts @@ -1,5 +1,5 @@ import { isPlatformBrowser } from '@angular/common'; -import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; +import { inject, Injectable, PLATFORM_ID } from '@angular/core'; class LocalStorageFallback implements Storage { [name: string]: any; @@ -23,7 +23,8 @@ export class LocalStorageService implements Storage { return this.storage.length; } - constructor(@Inject(PLATFORM_ID) platformId: object) { + constructor() { + const platformId = inject(PLATFORM_ID); if (isPlatformBrowser(platformId)) { this.storage = localStorage; } else { diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/user-store.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/user-store.ts index 268b94944..b56c9d348 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/user-store.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/user-store.ts @@ -1,4 +1,4 @@ -import { Injectable, isDevMode } from '@angular/core'; +import { inject, Injectable, isDevMode } from '@angular/core'; import { User } from '../models/user'; import { LocalStorageService } from './local-storage'; @@ -16,6 +16,7 @@ const USER_TOKEN = 'currentUser'; providedIn: 'root' }) export class UserStore { + private localStorage = inject(LocalStorageService); private _currentUser: User | null; /** Current logged in user, if any */ public get currentUser() { return this._currentUser; } @@ -32,7 +33,7 @@ export class UserStore { return initials; } - constructor(private localStorage: LocalStorageService) { + constructor() { const storedUser = this.localStorage.getItem(USER_TOKEN); if (storedUser && storedUser !== 'undefined') { try { diff --git a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.ts b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.ts index ac612f8b4..417ea95e3 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, OnInit, viewChild, ViewEncapsulation, inject } from '@angular/core'; import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; import { IgxNavigationDrawerComponent, @@ -36,10 +36,11 @@ export class App implements OnInit { name: string }[] = []; - @ViewChild(IgxNavigationDrawerComponent, { static: true }) - public navdrawer!: IgxNavigationDrawerComponent; + public navdrawer = viewChild.required(IgxNavigationDrawerComponent); - constructor(private router: Router) { + private router = inject(Router); + + constructor() { for (const route of routes) { if (route.path && route.data && route.path.indexOf('*') === -1) { this.topNavLinks.push({ @@ -55,9 +56,9 @@ export class App implements OnInit { filter((x): x is NavigationStart => x instanceof NavigationStart) ) .subscribe((event: NavigationStart) => { - if (event.url !== '/' && !this.navdrawer.pin) { + if (event.url !== '/' && !this.navdrawer().pin) { // Close drawer when selecting a view on mobile (unpinned) - this.navdrawer.close(); + this.navdrawer().close(); } }); } diff --git a/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts index 0457e89e9..bfd003b10 100644 --- a/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, Component, viewChild, ViewEncapsulation } from '@angular/core'; // radial gauge imports import { SweepDirection } from 'igniteui-angular-core'; import { @@ -24,125 +24,124 @@ export class <%=ClassName%> implements AfterViewInit { public needleShape = RadialGaugeNeedleShape; public pivotShape = RadialGaugePivotShape; - @ViewChild('radialGauge', { static: true }) - public radialGauge!: IgxRadialGaugeComponent; + public radialGauge = viewChild.required('radialGauge'); public ngAfterViewInit(): void { // enabling animation duration (in milliseconds) - this.radialGauge.transitionDuration = 500; + this.radialGauge().transitionDuration = 500; this.AnimateToGauge3(); } public AnimateToGauge4(): void { - this.radialGauge.height = '330px'; - this.radialGauge.width = '100%'; - this.radialGauge.minimumValue = 0; - this.radialGauge.maximumValue = 80; - this.radialGauge.value = 10; - this.radialGauge.interval = 10; + this.radialGauge().height = '330px'; + this.radialGauge().width = '100%'; + this.radialGauge().minimumValue = 0; + this.radialGauge().maximumValue = 80; + this.radialGauge().value = 10; + this.radialGauge().interval = 10; // Label Settings - this.radialGauge.labelExtent = 0.6; - this.radialGauge.labelInterval = 10; - this.radialGauge.font = '10px Verdana,Arial'; + this.radialGauge().labelExtent = 0.6; + this.radialGauge().labelInterval = 10; + this.radialGauge().font = '10px Verdana,Arial'; // Scale Settings - this.radialGauge.scaleStartAngle = 150; - this.radialGauge.scaleEndAngle = 30; - this.radialGauge.scaleBrush = '#0b8fed'; - this.radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto; - this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise; - this.radialGauge.scaleEndExtent = 0.825; - this.radialGauge.scaleStartExtent = 0.775; - - this.radialGauge.minorTickStartExtent = 0.7; - this.radialGauge.minorTickEndExtent = 0.75; - this.radialGauge.tickStartExtent = 0.675; - this.radialGauge.tickEndExtent = 0.75; + this.radialGauge().scaleStartAngle = 150; + this.radialGauge().scaleEndAngle = 30; + this.radialGauge().scaleBrush = '#0b8fed'; + this.radialGauge().scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto; + this.radialGauge().scaleSweepDirection = SweepDirection.Clockwise; + this.radialGauge().scaleEndExtent = 0.825; + this.radialGauge().scaleStartExtent = 0.775; + + this.radialGauge().minorTickStartExtent = 0.7; + this.radialGauge().minorTickEndExtent = 0.75; + this.radialGauge().tickStartExtent = 0.675; + this.radialGauge().tickEndExtent = 0.75; // Backing Settings - this.radialGauge.backingShape = RadialGaugeBackingShape.Fitted; - this.radialGauge.backingBrush = '#fcfcfc'; - this.radialGauge.backingOutline = '#d6d6d6'; - this.radialGauge.backingOversweep = 5; - this.radialGauge.backingCornerRadius = 10; - this.radialGauge.backingOuterExtent = 0.9; + this.radialGauge().backingShape = RadialGaugeBackingShape.Fitted; + this.radialGauge().backingBrush = '#fcfcfc'; + this.radialGauge().backingOutline = '#d6d6d6'; + this.radialGauge().backingOversweep = 5; + this.radialGauge().backingCornerRadius = 10; + this.radialGauge().backingOuterExtent = 0.9; // Needle Settings - this.radialGauge.needleShape = RadialGaugeNeedleShape.NeedleWithBulb; - this.radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay; - this.radialGauge.needleEndExtent = 0.5; - this.radialGauge.needlePointFeatureExtent = 0.3; - this.radialGauge.needlePivotWidthRatio = 0.2; - this.radialGauge.needleBrush = '#9f9fa0'; - this.radialGauge.needleOutline = '#9f9fa0'; - this.radialGauge.needlePivotBrush = '#9f9fa0'; - this.radialGauge.needlePivotOutline = '#9f9fa0'; + this.radialGauge().needleShape = RadialGaugeNeedleShape.NeedleWithBulb; + this.radialGauge().needlePivotShape = RadialGaugePivotShape.CircleOverlay; + this.radialGauge().needleEndExtent = 0.5; + this.radialGauge().needlePointFeatureExtent = 0.3; + this.radialGauge().needlePivotWidthRatio = 0.2; + this.radialGauge().needleBrush = '#9f9fa0'; + this.radialGauge().needleOutline = '#9f9fa0'; + this.radialGauge().needlePivotBrush = '#9f9fa0'; + this.radialGauge().needlePivotOutline = '#9f9fa0'; // TickMark Settings - this.radialGauge.tickBrush = 'rgba(51, 51, 51, 1)'; - this.radialGauge.minorTickBrush = 'rgba(73, 73, 73, 1)'; - this.radialGauge.minorTickCount = 6; + this.radialGauge().tickBrush = 'rgba(51, 51, 51, 1)'; + this.radialGauge().minorTickBrush = 'rgba(73, 73, 73, 1)'; + this.radialGauge().minorTickCount = 6; - this.radialGauge.ranges.clear(); + this.radialGauge().ranges.clear(); } public AnimateToGauge3(): void { - this.radialGauge.height = '330px'; - this.radialGauge.width = '100%'; + this.radialGauge().height = '330px'; + this.radialGauge().width = '100%'; - this.radialGauge.minimumValue = 0; - this.radialGauge.maximumValue = 50; - this.radialGauge.value = 25; - this.radialGauge.interval = 5; + this.radialGauge().minimumValue = 0; + this.radialGauge().maximumValue = 50; + this.radialGauge().value = 25; + this.radialGauge().interval = 5; // setting appearance of labels - this.radialGauge.labelInterval = 5; - this.radialGauge.labelExtent = 0.71; - this.radialGauge.font = '10px Verdana,Arial'; + this.radialGauge().labelInterval = 5; + this.radialGauge().labelExtent = 0.71; + this.radialGauge().font = '10px Verdana,Arial'; // setting custom needle - this.radialGauge.isNeedleDraggingEnabled = true; - this.radialGauge.needleEndExtent = 0.5; - this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle; - this.radialGauge.needleEndWidthRatio = 0.03; - this.radialGauge.needleStartWidthRatio = 0.05; - this.radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay; - this.radialGauge.needlePivotWidthRatio = 0.15; - this.radialGauge.needleBaseFeatureWidthRatio = 0.15; - this.radialGauge.needleBrush = '#79797a'; - this.radialGauge.needleOutline = '#79797a'; - this.radialGauge.needlePivotBrush = '#79797a'; - this.radialGauge.needlePivotOutline = '#79797a'; + this.radialGauge().isNeedleDraggingEnabled = true; + this.radialGauge().needleEndExtent = 0.5; + this.radialGauge().needleShape = RadialGaugeNeedleShape.Triangle; + this.radialGauge().needleEndWidthRatio = 0.03; + this.radialGauge().needleStartWidthRatio = 0.05; + this.radialGauge().needlePivotShape = RadialGaugePivotShape.CircleOverlay; + this.radialGauge().needlePivotWidthRatio = 0.15; + this.radialGauge().needleBaseFeatureWidthRatio = 0.15; + this.radialGauge().needleBrush = '#79797a'; + this.radialGauge().needleOutline = '#79797a'; + this.radialGauge().needlePivotBrush = '#79797a'; + this.radialGauge().needlePivotOutline = '#79797a'; // setting appearance of major/minor ticks - this.radialGauge.minorTickCount = 4; - this.radialGauge.minorTickEndExtent = 0.625; - this.radialGauge.minorTickStartExtent = 0.6; - this.radialGauge.minorTickStrokeThickness = 1; - this.radialGauge.minorTickBrush = '#79797a'; - this.radialGauge.tickStartExtent = 0.6; - this.radialGauge.tickEndExtent = 0.65; - this.radialGauge.tickStrokeThickness = 2; - this.radialGauge.tickBrush = '#79797a'; + this.radialGauge().minorTickCount = 4; + this.radialGauge().minorTickEndExtent = 0.625; + this.radialGauge().minorTickStartExtent = 0.6; + this.radialGauge().minorTickStrokeThickness = 1; + this.radialGauge().minorTickBrush = '#79797a'; + this.radialGauge().tickStartExtent = 0.6; + this.radialGauge().tickEndExtent = 0.65; + this.radialGauge().tickStrokeThickness = 2; + this.radialGauge().tickBrush = '#79797a'; // setting extent of gauge scale - this.radialGauge.scaleStartAngle = 120; - this.radialGauge.scaleEndAngle = 60; - this.radialGauge.scaleBrush = '#d6d6d6'; - this.radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted; - this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise; - this.radialGauge.scaleEndExtent = 0.57; - this.radialGauge.scaleStartExtent = 0.5; + this.radialGauge().scaleStartAngle = 120; + this.radialGauge().scaleEndAngle = 60; + this.radialGauge().scaleBrush = '#d6d6d6'; + this.radialGauge().scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted; + this.radialGauge().scaleSweepDirection = SweepDirection.Clockwise; + this.radialGauge().scaleEndExtent = 0.57; + this.radialGauge().scaleStartExtent = 0.5; // setting appearance of backing dial - this.radialGauge.backingBrush = '#fcfcfc'; - this.radialGauge.backingOutline = '#d6d6d6'; - this.radialGauge.backingStrokeThickness = 5; - this.radialGauge.backingShape = RadialGaugeBackingShape.Circular; + this.radialGauge().backingBrush = '#fcfcfc'; + this.radialGauge().backingOutline = '#d6d6d6'; + this.radialGauge().backingStrokeThickness = 5; + this.radialGauge().backingShape = RadialGaugeBackingShape.Circular; // setting custom gauge ranges const range1 = new IgxRadialGaugeRangeComponent(); @@ -154,15 +153,15 @@ export class <%=ClassName%> implements AfterViewInit { const range3 = new IgxRadialGaugeRangeComponent(); range3.startValue = 35; range3.endValue = 45; - this.radialGauge.rangeBrushes = ['#F86232', '#DC3F76', '#7446B9']; - this.radialGauge.rangeOutlines = ['#F86232', '#DC3F76', '#7446B9']; - this.radialGauge.ranges.clear(); - this.radialGauge.ranges.add(range1); - this.radialGauge.ranges.add(range2); - this.radialGauge.ranges.add(range3); + this.radialGauge().rangeBrushes = ['#F86232', '#DC3F76', '#7446B9']; + this.radialGauge().rangeOutlines = ['#F86232', '#DC3F76', '#7446B9']; + this.radialGauge().ranges.clear(); + this.radialGauge().ranges.add(range1); + this.radialGauge().ranges.add(range2); + this.radialGauge().ranges.add(range3); // setting extent of all gauge ranges - for (let i = 0; i < this.radialGauge.ranges.count; i++) { - const range = this.radialGauge.ranges.item(i); + for (let i = 0; i < this.radialGauge().ranges.count; i++) { + const range = this.radialGauge().ranges.item(i); range.innerStartExtent = 0.5; range.innerEndExtent = 0.5; range.outerStartExtent = 0.57; @@ -172,39 +171,39 @@ export class <%=ClassName%> implements AfterViewInit { public AnimateToGauge2(): void { - this.radialGauge.height = '330px'; - this.radialGauge.width = '100%'; + this.radialGauge().height = '330px'; + this.radialGauge().width = '100%'; - this.radialGauge.minimumValue = 100; - this.radialGauge.maximumValue = 200; - this.radialGauge.value = 125; + this.radialGauge().minimumValue = 100; + this.radialGauge().maximumValue = 200; + this.radialGauge().value = 125; // Scale Settings - this.radialGauge.scaleStartAngle = 135; - this.radialGauge.scaleEndAngle = 45; - this.radialGauge.scaleBrush = 'transparent'; - this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise; + this.radialGauge().scaleStartAngle = 135; + this.radialGauge().scaleEndAngle = 45; + this.radialGauge().scaleBrush = 'transparent'; + this.radialGauge().scaleSweepDirection = SweepDirection.Clockwise; // Backing Settings - this.radialGauge.backingOutline = 'white'; - this.radialGauge.backingBrush = 'white'; + this.radialGauge().backingOutline = 'white'; + this.radialGauge().backingBrush = 'white'; // Needle Settings - this.radialGauge.needleEndExtent = 0.8; - this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle; - this.radialGauge.needlePivotShape = RadialGaugePivotShape.Circle; - this.radialGauge.needlePivotWidthRatio = 0.1; - this.radialGauge.needleBrush = '#79797a'; - this.radialGauge.needleOutline = '#79797a'; + this.radialGauge().needleEndExtent = 0.8; + this.radialGauge().needleShape = RadialGaugeNeedleShape.Triangle; + this.radialGauge().needlePivotShape = RadialGaugePivotShape.Circle; + this.radialGauge().needlePivotWidthRatio = 0.1; + this.radialGauge().needleBrush = '#79797a'; + this.radialGauge().needleOutline = '#79797a'; // TickMark Settings - this.radialGauge.tickBrush = 'transparent'; - this.radialGauge.minorTickBrush = 'transparent'; + this.radialGauge().tickBrush = 'transparent'; + this.radialGauge().minorTickBrush = 'transparent'; // Label Settings - this.radialGauge.labelInterval = 100; - this.radialGauge.labelExtent = 1; - this.radialGauge.font = '15px Verdana,Arial'; + this.radialGauge().labelInterval = 100; + this.radialGauge().labelExtent = 1; + this.radialGauge().font = '15px Verdana,Arial'; // setting custom gauge ranges const range1 = new IgxRadialGaugeRangeComponent(); @@ -214,15 +213,15 @@ export class <%=ClassName%> implements AfterViewInit { range2.startValue = 150; range2.endValue = 200; - this.radialGauge.rangeBrushes = ['#32f845', '#bf32f8']; - this.radialGauge.rangeOutlines = ['#32f845', '#bf32f8']; - this.radialGauge.ranges.clear(); - this.radialGauge.ranges.add(range1); - this.radialGauge.ranges.add(range2); + this.radialGauge().rangeBrushes = ['#32f845', '#bf32f8']; + this.radialGauge().rangeOutlines = ['#32f845', '#bf32f8']; + this.radialGauge().ranges.clear(); + this.radialGauge().ranges.add(range1); + this.radialGauge().ranges.add(range2); // setting extent of all gauge ranges - for (let i = 0; i < this.radialGauge.ranges.count; i++) { - const range = this.radialGauge.ranges.item(i); + for (let i = 0; i < this.radialGauge().ranges.count; i++) { + const range = this.radialGauge().ranges.item(i); range.innerStartExtent = 0.3; range.innerEndExtent = 0.3; range.outerStartExtent = 0.9; @@ -232,39 +231,39 @@ export class <%=ClassName%> implements AfterViewInit { public AnimateToGauge1(): void { - this.radialGauge.height = '330px'; - this.radialGauge.width = '100%'; + this.radialGauge().height = '330px'; + this.radialGauge().width = '100%'; - this.radialGauge.minimumValue = 0; - this.radialGauge.maximumValue = 10; - this.radialGauge.value = 7.5; + this.radialGauge().minimumValue = 0; + this.radialGauge().maximumValue = 10; + this.radialGauge().value = 7.5; // Scale Settings - this.radialGauge.scaleStartAngle = 200; - this.radialGauge.scaleEndAngle = -20; - this.radialGauge.scaleBrush = 'transparent'; - this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise; + this.radialGauge().scaleStartAngle = 200; + this.radialGauge().scaleEndAngle = -20; + this.radialGauge().scaleBrush = 'transparent'; + this.radialGauge().scaleSweepDirection = SweepDirection.Clockwise; // Backing Settings - this.radialGauge.backingOutline = 'white'; - this.radialGauge.backingBrush = 'white'; + this.radialGauge().backingOutline = 'white'; + this.radialGauge().backingBrush = 'white'; // Needle Settings - this.radialGauge.needleEndExtent = 0.8; - this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle; - this.radialGauge.needlePivotShape = RadialGaugePivotShape.Circle; - this.radialGauge.needlePivotWidthRatio = 0.1; - this.radialGauge.needleBrush = '#79797a'; - this.radialGauge.needleOutline = '#79797a'; + this.radialGauge().needleEndExtent = 0.8; + this.radialGauge().needleShape = RadialGaugeNeedleShape.Triangle; + this.radialGauge().needlePivotShape = RadialGaugePivotShape.Circle; + this.radialGauge().needlePivotWidthRatio = 0.1; + this.radialGauge().needleBrush = '#79797a'; + this.radialGauge().needleOutline = '#79797a'; // TickMark Settings - this.radialGauge.tickBrush = 'transparent'; - this.radialGauge.minorTickBrush = 'transparent'; + this.radialGauge().tickBrush = 'transparent'; + this.radialGauge().minorTickBrush = 'transparent'; // Label Settings - this.radialGauge.labelInterval = 10; - this.radialGauge.labelExtent = 1; - this.radialGauge.font = '15px Verdana,Arial'; + this.radialGauge().labelInterval = 10; + this.radialGauge().labelExtent = 1; + this.radialGauge().font = '15px Verdana,Arial'; // setting custom gauge ranges const range1 = new IgxRadialGaugeRangeComponent(); @@ -274,15 +273,15 @@ export class <%=ClassName%> implements AfterViewInit { range2.startValue = 5; range2.endValue = 10; - this.radialGauge.rangeBrushes = ['#a4bd29', '#F86232']; - this.radialGauge.rangeOutlines = ['#a4bd29', '#F86232']; - this.radialGauge.ranges.clear(); - this.radialGauge.ranges.add(range1); - this.radialGauge.ranges.add(range2); + this.radialGauge().rangeBrushes = ['#a4bd29', '#F86232']; + this.radialGauge().rangeOutlines = ['#a4bd29', '#F86232']; + this.radialGauge().ranges.clear(); + this.radialGauge().ranges.add(range1); + this.radialGauge().ranges.add(range2); // setting extent of all gauge ranges - for (let i = 0; i < this.radialGauge.ranges.count; i++) { - const range = this.radialGauge.ranges.item(i); + for (let i = 0; i < this.radialGauge().ranges.count; i++) { + const range = this.radialGauge().ranges.item(i); range.innerStartExtent = 0.3; range.innerEndExtent = 0.3; range.outerStartExtent = 0.9; diff --git a/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.ts index 13de0c6c9..ee90155e6 100644 --- a/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, viewChild } from '@angular/core'; import { HorizontalAlignment, IgxSelectComponent, @@ -28,11 +28,9 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; ] }) export class <%=ClassName%> { - @ViewChild(IgxSelectComponent, { static: true }) - public igxSelect!: IgxSelectComponent; + public igxSelect = viewChild.required(IgxSelectComponent); - @ViewChild(IgxToastComponent, { static: true }) - public output!: IgxToastComponent; + public output = viewChild.required(IgxToastComponent); public selected!: string; public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango']; @@ -42,6 +40,6 @@ export class <%=ClassName%> { }; public onSubmit() { - this.output.open(undefined, this.messagePositionSettings); + this.output().open(undefined, this.messagePositionSettings); } } diff --git a/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.ts index 1c3842f04..5c953ad57 100644 --- a/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, inject } from '@angular/core'; import { NgTemplateOutlet } from '@angular/common'; import { IgxTreeNodeComponent, @@ -35,7 +35,9 @@ export class <%=ClassName%> implements OnDestroy { public remoteData: SelectableNodeData[] = []; private destroy$ = new Subject(); - constructor(private dataService: Data) { + private dataService = inject(Data); + + constructor() { this.dataService.data.pipe(takeUntil(this.destroy$)).subscribe((data) => { this.loading = false; this.remoteData = data;