refactor: migration to signal queries

Author: xidedix

src/app/views/notifications/toasters/toasters.component.ts

@@ -1,5 +1,5 @@
 import { JsonPipe, NgClass, NgStyle, SlicePipe } from '@angular/common';
-import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Component, OnInit, viewChildren } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
@@ -72,7 +72,7 @@ export class ToastersComponent implements OnInit {
     filter(e => e.autohide !== this.autohide)
   );
 
-  @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
+  readonly toasterComponents = viewChildren(ToasterComponent);
 
   ngOnInit(): void {
     this.formChanges.subscribe(e => {
@@ -87,7 +87,7 @@ export class ToastersComponent implements OnInit {
 
   addToast() {
     const formValues = this.toasterForm.value;
-    const toasterPosition = this.viewChildren.filter(item => item.placement === this.toasterForm.value.position);
+    const toasterPosition = this.toasterComponents().filter(item => item.placement === this.toasterForm.value.position);
     toasterPosition.forEach((item) => {
       const title = `Toast ${formValues.color} ${formValues.position}`;
       const { position, ...props } = { ...formValues, title, position: formValues.position };

src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.ts

@@ -1,21 +1,30 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, inject, OnInit, viewChild } from '@angular/core';
 import { getStyle } from '@coreui/utils';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { RouterLink } from '@angular/router';
 import { IconDirective } from '@coreui/icons-angular';
-import { RowComponent, ColComponent, WidgetStatAComponent, TemplateIdDirective, ThemeDirective, DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective, DropdownDividerDirective } from '@coreui/angular';
+import {
+  ButtonDirective,
+  ColComponent,
+  DropdownComponent,
+  DropdownDividerDirective,
+  DropdownItemDirective,
+  DropdownMenuDirective,
+  DropdownToggleDirective,
+  RowComponent,
+  TemplateIdDirective,
+  WidgetStatAComponent
+} from '@coreui/angular';
 
 @Component({
-    selector: 'app-widgets-dropdown',
-    templateUrl: './widgets-dropdown.component.html',
-    styleUrls: ['./widgets-dropdown.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Default,
-    imports: [RowComponent, ColComponent, WidgetStatAComponent, TemplateIdDirective, IconDirective, ThemeDirective, DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective, RouterLink, DropdownDividerDirective, ChartjsComponent]
+  selector: 'app-widgets-dropdown',
+  templateUrl: './widgets-dropdown.component.html',
+  styleUrls: ['./widgets-dropdown.component.scss'],
+  imports: [RowComponent, ColComponent, WidgetStatAComponent, TemplateIdDirective, IconDirective, DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective, RouterLink, DropdownDividerDirective, ChartjsComponent]
 })
 export class WidgetsDropdownComponent implements OnInit, AfterContentInit {
   private changeDetectorRef = inject(ChangeDetectorRef);
 
-
   data: any[] = [];
   options: any[] = [];
   labels = [
@@ -77,7 +86,7 @@ export class WidgetsDropdownComponent implements OnInit, AfterContentInit {
     scales: {
       x: {
         border: {
-          display: false,
+          display: false
         },
         grid: {
           display: false,
@@ -169,15 +178,15 @@ export class WidgetsDropdownComponent implements OnInit, AfterContentInit {
 }
 
 @Component({
-    selector: 'app-chart-sample',
-    template: '<c-chart type="line" [data]="data" [options]="options" width="300" #chart></c-chart>',
-    imports: [ChartjsComponent]
+  selector: 'app-chart-sample',
+  template: '<c-chart type="line" [data]="data" [options]="options" width="300" #chart></c-chart>',
+  imports: [ChartjsComponent]
 })
 export class ChartSample implements AfterViewInit {
 
   constructor() {}
 
-  @ViewChild('chart') chartComponent!: ChartjsComponent;
+  readonly chartComponent = viewChild.required<ChartjsComponent>('chart');
 
   colors = {
     label: 'My dataset',
@@ -228,7 +237,7 @@ export class ChartSample implements AfterViewInit {
       const newData = [42, 88, 42, 66, 77];
       let { datasets, labels } = { ...this.data };
       // @ts-ignore
-      const before = this.chartComponent?.chart?.data.datasets.length;
+      const before = this.chartComponent()?.chart?.data.datasets.length;
       console.log('before', before);
       // console.log('datasets, labels', datasets, labels)
       // @ts-ignore
@@ -245,7 +254,7 @@ export class ChartSample implements AfterViewInit {
       // console.log('datasets, labels', { datasets, labels } = {...this.data})
       // @ts-ignore
       setTimeout(() => {
-        const after = this.chartComponent?.chart?.data.datasets.length;
+        const after = this.chartComponent()?.chart?.data.datasets.length;
         console.log('after', after);
       });
     }, 5000);