View Queries

🔍 Angular View Queries: Finding Treasures in Your Template

Imagine you’re a detective with a magical magnifying glass that can find anything in a room…

The Story: Detective Angular and the Template Treasures

Once upon a time, there was a clever detective named Angular Component. This detective lived in a house (the template) filled with treasures (elements and child components). But here’s the problem: the detective couldn’t just walk around and grab things randomly. They needed special tools to find exactly what they were looking for!

These special tools are called View Queries. Let’s meet each one!

🎯 @ViewChild: Finding ONE Special Thing

What Is It?

Think of @ViewChild like pointing your finger at ONE specific toy in your room and saying “I want THAT one!”

It finds a single element or component inside your template.

Simple Example

@Component({
  template: `
    <input #nameBox type="text">
    <button (click)="focus()">
      Focus!
    </button>
  `
})
export class MyComponent {
  @ViewChild('nameBox')
  inputField!: ElementRef;

  focus() {
    this.inputField
      .nativeElement.focus();
  }
}

What Just Happened?

1. We put a name tag (#nameBox) on our input
2. @ViewChild('nameBox') says: “Find the thing called nameBox”
3. Now we can control it! (Like making it focused)

graph TD
    A["Template has #nameBox"] --> B["@ViewChild finds it"]
    B --> C["Store in inputField"]
    C --> D["Now you control it!"]

🌟 Key Points

👥 @ViewChildren: Finding ALL the Matching Things

What Is It?

Imagine you have a box of crayons and you want to grab ALL the red crayons at once. That’s @ViewChildren!

It finds multiple elements or components that match your search.

Simple Example

@Component({
  template: `
    <div #box>Box 1</div>
    <div #box>Box 2</div>
    <div #box>Box 3</div>
    <button (click)="colorAll()">
      Color All!
    </button>
  `
})
export class MyComponent {
  @ViewChildren('box')
  boxes!: QueryList<ElementRef>;

  colorAll() {
    this.boxes.forEach(box => {
      box.nativeElement
        .style.background = 'yellow';
    });
  }
}

The Magic

All three boxes have the same name tag #box. Using @ViewChildren, we grab them ALL and can change them together!

graph TD
    A["3 elements with #box"] --> B["@ViewChildren grabs ALL"]
    B --> C["Returns QueryList"]
    C --> D["Loop through each one"]

📦 @ContentChild: Finding Things GIVEN to You

What Is It?

Imagine you have a gift box, and someone can put ONE present inside. @ContentChild lets you peek inside and grab that present!

The difference from @ViewChild:

• @ViewChild finds things YOU created in your template
• @ContentChild finds things OTHERS gave you between your tags

Simple Example

The Card Component (the gift box):

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {
  @ContentChild('header')
  headerEl!: ElementRef;

  ngAfterContentInit() {
    console.log('Found:',
      this.headerEl);
  }
}

Using the Card (putting a gift inside):

<app-card>
  <h2 #header>Hello World!</h2>
</app-card>

Picture This

graph TD
    A["Parent puts content"] --> B["<app-card>"]
    B --> C["<h2 #header>...</h2>"]
    C --> D["@ContentChild finds it"]
    D --> E["Available in card!"]

💡 The Big Difference

📚 @ContentChildren: Finding ALL Gifts

What Is It?

Same as @ContentChild, but for when someone gives you MULTIPLE presents of the same type!

Simple Example

Tab Container (accepts many tabs):

@Component({
  selector: 'app-tabs',
  template: `
    <div class="tabs">
      <ng-content></ng-content>
    </div>
  `
})
export class TabsComponent {
  @ContentChildren(TabComponent)
  tabs!: QueryList<TabComponent>;

  ngAfterContentInit() {
    console.log(
      `Found ${this.tabs.length} tabs!`
    );
  }
}

Using it:

<app-tabs>
  <app-tab title="Home">...</app-tab>
  <app-tab title="About">...</app-tab>
  <app-tab title="Contact">...</app-tab>
</app-tabs>

Now TabsComponent knows about ALL three tabs!

📋 QueryList: The Special Container

What Is It?

When you use @ViewChildren or @ContentChildren, you don’t get a regular array. You get a QueryList – a special smart container!

Why Is It Special?

1. It Updates Automatically! If elements are added/removed, QueryList knows
2. It Has a changes Observable – You can watch for updates

Simple Example

@ViewChildren('item')
items!: QueryList<ElementRef>;

ngAfterViewInit() {
  // Initial items
  console.log(this.items.length);

  // Watch for changes
  this.items.changes.subscribe(
    (newList) => {
      console.log('Items changed!');
      console.log('Now:', newList.length);
    }
  );
}

QueryList Superpowers

graph TD
    A["QueryList"] --> B[".length - count items"]
    A --> C[".first - get first item"]
    A --> D[".last - get last item"]
    A --> E[".forEach - loop all"]
    A --> F[".changes - watch updates"]
    A --> G[".toArray - convert to array"]

Handy Methods

⏰ When Can You Use Them?

This is SUPER important! You can’t use these queries right away.

graph TD
    A["Component Created"] --> B["constructor - NO queries yet"]
    B --> C["ngOnInit - Still NO"]
    C --> D["ngAfterContentInit - ContentChild ready!"]
    D --> E["ngAfterViewInit - ViewChild ready!"]

The Rule

🎁 Quick Reference: Which One Do I Use?

Ask yourself these questions:

graph TD
    A["What do you need?"] --> B{How many items?}
    B -->|ONE| C{Who created it?}
    B -->|MULTIPLE| D{Who created them?}
    C -->|I did - in my template| E["@ViewChild"]
    C -->|User passed it in| F["@ContentChild"]
    D -->|I did - in my template| G["@ViewChildren"]
    D -->|User passed them in| H["@ContentChildren"]

🌈 Real World Analogy

🎯 Summary

You learned 5 powerful tools today:

1. @ViewChild → Find ONE thing in your template
2. @ViewChildren → Find MANY things in your template
3. @ContentChild → Find ONE projected content
4. @ContentChildren → Find MANY projected contents
5. QueryList → A smart container that tracks changes

Now you’re a true Angular detective! 🕵️ Go find those treasures! ✨