obtain a list of elements using ViewChild attribute

Question

obtain a list of elements using ViewChild attribute

In Angular 8, I have created a generic form with a form array.

I am trying to retrieve all elements that contain the ViewChild id.

However, when I try to output the ViewChild element using console.log, it only displays one element instead of a list. How can I get it to display a list of elements?

What could be causing this issue? How can I fix it?

HTML:

<ngx-mat-file-input #upload disabled="true" class="uploadFild" (change)="showPreview($event,i)" appearance="outline"
                            formControlName="file" type=file>
                        </ngx-mat-file-input>

TS:

@ViewChild('upload', { static: false }) pRef: ElementRef[];

function():void {
    this.pRef['disabled'] = false;
    console.log(this.pRef);        
}

javascript angular typescript

Answer 1

Answer №1

Instead of using @ContentChildren, try using @ViewChildren in your Angular component.

See an example below:

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

@Directive({selector: 'child-directive'})
class ChildDirective {
}

@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
  @ViewChildren(ChildDirective) viewChildren !: QueryList<ChildDirective>;

  ngAfterViewInit() {
    // viewChildren property is now accessible
  }
}

For more information, refer to the official Angular documentation here: https://angular.io/api/core/ViewChildren

Answer 2

Instead of using @ContentChildren, try using @ViewChildren in your Angular component.

See an example below:

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

@Directive({selector: 'child-directive'})
class ChildDirective {
}

@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
  @ViewChildren(ChildDirective) viewChildren !: QueryList<ChildDirective>;

  ngAfterViewInit() {
    // viewChildren property is now accessible
  }
}

For more information, refer to the official Angular documentation here: https://angular.io/api/core/ViewChildren

obtain a list of elements using ViewChild attribute

Answer №1

Similar questions

What could be the root of the error message "Outlet is not activated"?

Tips for displaying a gallery of 5 images in a 2-row slider using bxslider

Customizing the items-per-page selection in the v-data-table component with Vuetify

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

Leverage jQuery to Retrieve Text and Modify

A guide on implementing the useEffect hook with forwardRef in TypeScript

Display the properties of the nested object

Issues with Rock Paper Scissors Array in Discord.js V12 not functioning as expected

How can one include a URL as a "URL parameter" when using Express?

When utilizing Reactjs, accessing an element by its id becomes challenging when the element is nested within a map() function

Extend the express request object with Typescript and then export the modified object

Having difficulty implementing NG Zorro into the project because of a dependency issue

The necessary data is missing in the scope of the callback function

Using Jquery to retrieve data in sections from a server and continuously add it to a file on the client side

Basic exam but located in a place that is not valid

What methods can be used to customize the font and background color of a website for different user groups?

How can I trigger a PHP function by clicking a button on a PHP page that has already been loaded?

Refreshing the page allows Socket.io to establish multiple connections

Click on the button to add a new question and watch as another row magically appears

Comparing Node.js and Angular for Hyperledger Composer Development: Which is the Better Choice?