ViewChildren and ViewChild in angular

ViewChildren and ViewChild in angular:

In Angular, @ViewChild and @ViewChildren are both decorators used to access child components, directives, or DOM elements in a component's template.

 

@ViewChild queries a single child element or component in the template, providing direct access for method calls or property manipulation. It is available after view initialization, typically in the ngAfterViewInit lifecycle hook.


@ViewChildren queries multiple child elements or components and returns a QueryList, a dynamic collection that updates automatically when the DOM changes. It is useful for managing multiple similar child components.


Example:

import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ElementRef } from '@angular/core';

import { ChildComponent } from './child/child.component'; // Assume ChildComponent is defined elsewhere


@Component({

  selector: 'app-root',

  template: `

    <div>

      <input #inputField type="text" placeholder="Enter text" />

      <button (click)="focus()">Input</button>

    </div>

    

    <div>

      <app-child *ngFor="let item of items" [data]="item"></app-child>

      <button (click)="resetChildren()">Reset All Children</button>

    </div>

  `

})

export class AppComponent implements AfterViewInit {

  @ViewChild('inputField') inputField!: ElementRef;


  @ViewChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;


  items = ['Item 1', 'Item 2', 'Item 3']; // List of data to pass to child components


  ngAfterViewInit() {

    console.log('Input Field:', this.inputField.nativeElement);

    console.log('Child Components:', this.childComponents.toArray());

  }


  focus() {

    this.inputField.nativeElement.focus();

  }


  resetChildren() {

    this.childComponents.toArray().forEach(child => child.reset());

  }

}


Summary:

Use @ViewChild for single child access and @ViewChildren for multiple.

@ViewChild returns a direct instance, while @ViewChildren returns a list that updates dynamically. 

Comments

Post a Comment

Popular posts from this blog

Multiline to singleline IN C# - CODING

Multiline to singleline IN C# - CODING using System; using System.Linq; class Program {     static void Main(string[] args)     {         string input = @"This is                  multiline";                  // Split the input into lines, trim each line, and filter out empty lines         string result = string.Join(" ", input.Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries)                                                .Select(line => line.Trim()));         Console.WriteLine(result);     } } Output: This is  multiline
Read more

EF Core interview questions for beginners

1. What is Entity Framework Core (EF Core)? EF Core is an open-source Object-Relational Mapper (ORM) that enables .NET developers to work with databases using .NET objects. It allows you to interact with a database using strongly typed classes and LINQ queries, rather than writing raw SQL queries. EF Core supports various database providers, such as SQL Server, SQLite, PostgreSQL, MySQL, and more. 2. What are the advantages of using EF Core over traditional ADO.NET? Productivity:  EF Core allows you to work with databases using high-level objects, reducing the amount of boilerplate code you need to write. Cross-platform:  EF Core supports multiple databases and works on Windows, Linux, and macOS. LINQ Support:  You can query the database using LINQ, which is more type-safe and easier to maintain than raw SQL queries. Code-First & Database-First:  EF Core supports both approaches to model databases. Change Tra...
Read more

EF Core interview questions for experienced

EF Core interview questions for experienced 1. What are the main differences between Entity Framework (EF) and Entity Framework Core (EF Core)? EF Core is a complete rewrite of EF. Unlike EF, EF Core supports cross-platform development, improved performance, LINQ query translation, and has a more modular architecture. EF Core does not support all features that EF 6 does (like lazy loading and some database providers). 2. How does EF Core handle migrations, and what are some common pitfalls? EF Core uses migrations to update the database schema based on model changes. Common pitfalls include not applying migrations correctly, misalignment between model and database state, or missing/overwriting migrations during collaboration in a team environment. 3. Explain the difference between Add and Attach methods in EF Core. Add method is used to add a new entity to the context and mark it as Added , while Attach attaches an existing entity to the context with no changes. The Attach meth...
Read more