Signal queries (component)

In the previous journal, the viewChild is used to query ElementRef. In the example below, a custom component can also be queries in the same way.

HelloComponent has #hello template reference and is being queries by helloComponent, whichg is of type Signal<HelloComponent>.

<input placeholder="Search for something" (keyup.enter)="onSearch()" /> <app-hello #hello />

  import { viewChild } from '@angular/core';

  // ...
  @Component({
    // ...
    imports: [ReactiveFormsModule, HelloComponent],
    // ...
  })
  // ...

  searchInput = viewChild.required<ElementRef>('search');
  helloComponent = viewChild.required<HelloComponent>('hello');

  onSearch() {
    const query = this.searchInput()?.nativeElement.value;
    console.log('search query', query);

    console.log(this.helloComponent().somevalue()); // prints "como vai?"
  }

export class HelloComponent implements OnInit {
	somevalue = signal("como vai?");
}