Prime Vyapar

Tales from a Developer's Trenches
Referencing component children with queries - Angular - Prime Vyapar

Referencing component children with queries

Components can leverage queries to locate specific elements within their template and potentially access data or functionalities associated with them.
There are two main types of queries:
  • View Queries:These queries search for elements within the component's view, including direct children and elements further down the DOM tree. They can target components, directives, or even plain DOM elements.
  • Content Queries: These queries focus on elements projected into the component's content area using ng-content. This typically involves child components projecting their content into the parent.
By using queries, you can achieve various interactions between components and their child elements. Some common use cases include:
  • Accessing child component properties or methods:You can retrieve a reference to a child component and then interact with its public properties or methods.
  • Manipulating child element DOM:By obtaining a reference to a DOM element, you can directly modify its styles or attributes.
  • Reading data from child element injectors:Queries can access specific values provided by child element injectors, offering more control over data retrieval.

View queries

View queries retrieve results from the elements in the component's view — the elements defined in the component's own template. You can query for a single result with the @ViewChild decorator.

Code Snippet
Copy
                
                   
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-ref-view-child',
  templateUrl: './ref-view-child.component.html',
  styleUrl: './ref-view-child.component.scss'
})
export class RefViewChildComponent {
  // Accesing html element using ViewChild. Here test is ref keywork for sample html code shows below
  @ViewChild('test') test: any; 
  
  
   ngAfterViewInit() {
   console.log(this.test);
  }

HTML Code

Code Snippet
Copy
                
                   

   <div #test>
    This is example division for ViewChild 
</div>

@ViewChildren

You can also query for multiple results with the @ViewChildren decorator.

For More Details please Visit Its Show Time


Code Snippet
Copy
                
                   
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-ref-view-child',
  templateUrl: './ref-view-child.component.html',
  styleUrl: './ref-view-child.component.scss'
})
export class RefViewChildComponent {
  // Accesing html element using ViewChild. Here test is ref keywork for sample html code shows below
  @ViewChildren('test') test: any; it will be QueryList array 
  
  
   ngAfterViewInit() {
   this.test.forEach(action => {
      console.log(action);
    });
  }

HTML Code

Code Snippet
Copy
                
                   

   <div #test>
    This is example division for ViewChild 
</div>

  <div #test>
    This is example division for ViewChild 
</div>


  <div #test>
    This is example division for ViewChild 
</div>


  <div #test>
    This is example division for ViewChild 
</div>

Query locators

This first parameter for each query decorator is its locator. Most of the time, you want to use a component or directive as your locator.

Code Snippet
Copy
                
                   
 <button #savebtn>Save</button>

HTML Code

Code Snippet
Copy
                
                   
  @ViewChild('savebtn') saveButton: ElementRef<HTMLButtonElement>;

Content Children

Conclusion
While queries provide a way to interact with child elements, it's generally recommended to favor a more declarative approach using component communication mechanisms like @Input() and @Output() for better maintainability and separation of concerns.

Leave a Comment

This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.

Comments







With ❤️ Happy Coding





With ❤️ Happy Coding