ng generate @angular/core:signal-queries-migration

wellwind · Dec 5, 2024 · e25eb6d · e25eb6d
1 parent 4c82c50
commit e25eb6d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/app/blog/blog-posts/blog-post/blog-post.component.ts b/src/app/blog/blog-posts/blog-post/blog-post.component.ts
@@ -2,10 +2,10 @@ import { NgTemplateOutlet } from '@angular/common';
 import {
   Component,
   ElementRef,
-  ViewChild,
   computed,
   effect,
   inject,
+  viewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRippleModule } from '@angular/material/core';
@@ -253,7 +253,7 @@ export class BlogPostComponent {
   private sitePostService = inject(SitePostService);
   private siteMetaService = inject(SiteMetaService);
 
-  @ViewChild('comments') protected comments?: ElementRef<HTMLElement>;
+  readonly comments = viewChild<ElementRef<HTMLElement>>('comments');
 
   protected get isServer() {
     return this.platformService.isServer;

diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts
@@ -3,10 +3,10 @@ import {
   ChangeDetectorRef,
   Component,
   OnInit,
-  ViewChild,
   effect,
   inject,
   signal,
+  viewChild
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
@@ -115,7 +115,7 @@ import { filter, map } from 'rxjs';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LayoutComponent implements OnInit {
-  @ViewChild('matDrawerContent') private matDrawerContent?: MatDrawerContent;
+  readonly matDrawerContent = viewChild<MatDrawerContent>('matDrawerContent');
 
   private cdr = inject(ChangeDetectorRef);
   private router = inject(Router);
@@ -166,8 +166,9 @@ export class LayoutComponent implements OnInit {
     this.router.events
       .pipe(filter((event) => event instanceof NavigationStart))
       .subscribe(() => {
-        if (this.matDrawerContent) {
-          this.matDrawerContent.scrollTo({ top: 0, left: 0 });
+        const matDrawerContent = this.matDrawerContent();
+        if (matDrawerContent) {
+          matDrawerContent.scrollTo({ top: 0, left: 0 });
           this.cdr.detectChanges();
         }
       });