💻 Signal Queries Code

import { 
  viewChild, 
  viewChildren, 
  contentChild, 
  contentChildren,
  computed,
  effect 
} from '@angular/core';

@Component({
  template: `
    <input #searchBox />
    <app-item />
    <app-item />
  `
})
export class MyComponent {
  // ===== viewChild - Single Element =====
  
  // Query by template reference
  searchBox = viewChild<ElementRef>('searchBox');
  // Returns: Signal<ElementRef | undefined>
  
  // Required - guaranteed to exist
  searchBoxRequired = viewChild.required<ElementRef>('searchBox');
  // Returns: Signal<ElementRef>
  
  // Query by component type
  firstItem = viewChild(ItemComponent);
  // Returns: Signal<ItemComponent | undefined>
  
  // With read option (get ElementRef instead of component)
  itemElement = viewChild(ItemComponent, { read: ElementRef });
  
  // ===== viewChildren - Multiple Elements =====
  
  allItems = viewChildren(ItemComponent);
  // Returns: Signal<readonly ItemComponent[]>
  
  allInputs = viewChildren<ElementRef>('input');
  // Returns: Signal<readonly ElementRef[]>
  
  // ===== contentChild - Projected Content =====
  
  // In parent template: <my-container><app-header /></my-container>
  header = contentChild(HeaderComponent);
  // Returns: Signal<HeaderComponent | undefined>
  
  headerRequired = contentChild.required(HeaderComponent);
  // Returns: Signal<HeaderComponent>
  
  // ===== contentChildren - Multiple Projected =====
  
  tabs = contentChildren(TabComponent);
  // Returns: Signal<readonly TabComponent[]>
  
  // ===== Using with computed/effect =====
  
  // Computed based on query results
  itemCount = computed(() => this.allItems().length);
  
  hasItems = computed(() => this.allItems().length > 0);
  
  firstItemLabel = computed(() => 
    this.firstItem()?.label() ?? 'No item'
  );
  
  // Effect when query results change
  constructor() {
    effect(() => {
      const items = this.allItems();
      console.log('Items changed:', items.length);
    });
  }
  
  // ===== Methods using queries =====
  
  focusSearch() {
    this.searchBox()?.nativeElement.focus();
  }
  
  highlightAllItems() {
    for (const item of this.allItems()) {
      item.highlight();
    }
  }
}

// ===== No more ngAfterViewInit for queries! =====

// OLD way with decorators:
@Component({...})
export class OldComponent implements AfterViewInit {
  @ViewChild('input') input!: ElementRef;
  
  ngAfterViewInit() {
    this.input.nativeElement.focus(); // Had to wait for this hook
  }
}

// NEW way with signal queries:
@Component({...})
export class NewComponent {
  input = viewChild.required<ElementRef>('input');
  
  constructor() {
    // Use effect - runs when view is ready and input exists
    effect(() => {
      const el = this.input();
      el.nativeElement.focus();
    });
  }
}