Angular7: Utilizing ElementRef to Access DOM Elements

Looking to access ElementRef within child nodes.

Here is the template:

<div #charts *ngFor="let tag of _tags">
  <jqxBulletChart
    style="margin-left: 10px; float: left;"
    [width]='50'
    [height]='350'
    [barSize]='"35%"'
    [labelsFormat]='"c"'
    [title]="''"
    description="{{tag.configuration.name}}"
    [showTooltip]='true'
    [labelsFormatFunction]="labelsFormatFunction"
    [tooltipFormatFunction]="tooltipFormatFunction" [ticks]='ticks'
    [ranges]='tag.value'
    [pointer]='pointer'
    [orientation]="'vertical'"
  >
  </jqxBulletChart>
</div>

The call:

@ViewChildren('charts') infoCharts: ElementRef;

Trying to retrieve child elements:

for (let chart of this.arrCharts) {
            console.log(chart);
            console.log(chart.nativeElement.lastChild)
            let child: jqxBulletChartComponent = chart.nativeElement.lastChild;
            console.log(child);
            console.log(+this.tags[count].displayValue);
            child.val(+this.tags[count].displayValue || 0);
            // child.val(20);
            count++;
        }

Struggling with making "child" of type ElementRef, any suggestions?

javascriptangulartypescriptfrontend

Answer №1

If you want to get the ElementRef for jqxBulletChart, try using the code below:

@ViewChildren(jqxBulletChartComponent,{read: ElementRef}) hellos: QueryList<ElementRef>;

Remember, make sure to include JQXBulletChartComponent and read the viewChildren as ElementRef.

Give it a try and let me know if it works for you!

Enjoy your coding journey!

Answer №2

It seems that ElementRef may not be suitable in this case due to the presence of multiple references named #charts within an ngFor loop. Consider using QueryList instead.

Answer №3

Give this a shot:

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})

export class AppComponent {
  name = "Angular";
  @ViewChildren("charts") charts: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.charts.forEach(c => console.log(c));
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please refrain from continuously refreshing the JavaScript file within Django templates

Is there a way to prevent the countdown timer from resetting when refreshing data on an HTML page? I want to update the data without interfering with the countdown timer. app.js var count = 8 var counter = setInterval(timer , 1000) function timer(){ ...

javascriptdjangoajaxdjango-rest-frameworkdjango-templates

Why is it not possible to place a breakpoint in certain sections of the jetpack code?

After setting two breakpoints as shown in the screenshot, I clicked on the example plugin only to find that the debugger is ignoring these breakpoints. Why is this happening? Could it be because the initialization code of the Jetpack plugin is not debuggab ...

javascriptfirefox-addonfirefox-addon-sdkfirefox-developer-tools

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

Angular guard for complex conditions and redirections

I need to implement a robust router guard that first checks if the user is authenticated in the web application. If authenticated, it must then check for other conditions and redirect to different pages based on those conditions, all while staying under th ...

angularangular-routingangular7angular-router-guardsangular-guards

Performing a password-protected JavaScript Ajax request that includes special characters

Within my JavaScript page, I have implemented an Ajax call shown in the code snippet below. The PHP page resides within a corporate intranet that demands domain authentication (without basic auth). To extract the username (u) and password (p), I am using j ...

javascriptjqueryajaxauthenticationpasswords

Why isn't $.post functioning properly in any instance?

I've been experiencing issues with my $.post calls throughout my code. Despite not sending requests to different domains, everything is localhosted. My Mac OS X 10.8 automatically defined my localhost alias as ramon.local, and I'm trying to make ...

javascriptjqueryajaxpostasynchronous

A Step-by-Step Guide to Successfully Clicking on a Checkbox Using Selenium and Python

Hello everyone, I'm facing an issue with clicking a checkbox. Here is the code for the checkbox: <label class="has-checkbox terms"><input name="order[terms]" type="hidden" value="0" /><input class="checkbox" type="checkbox" value=" ...

javascriptpythonseleniumxpathcss-selectors

When I attempt to run several promises simultaneously with Promise.All, I encounter an error

My code contains a series of promises, but they are not being executed as expected. Although the sequence is correct and functional, I have found that I need to utilize Promise.all in order for it to work properly. dataObj[0].pushScreen.map(item => { ...

javascriptreactjsreact-nativepromise

Using Angular2 animations (specifically transform animations) on an iPhone 6s may result in unexpected behavior

I am interested in utilizing Angular2's Animation to create an animation similar to the following: transition('out => arise', [ style({ 'transform': 'translateY(-50px)', '-webkit-transform&a ...

angularanimation

Tips for enlarging icons and buttons in Ionic 2

Is there a way to increase the size of the button and icon in the following code: <ion-card> <ion-card-header> Explore Nearby </ion-card-header> <ion-list> <button ion-item style="font-size:20px"> <i ...

cordovatypescripticonsionic2

JavaScript that is subtle and lacks function parameters

Suppose you have: <div id="data" onclick="handleData(1)">Datum 1</div> and you prefer late binding instead: <div id="data">Datum 1</div> <script> $("#data").click(function() { handleData(1); }) </script&g ...

javascriptjqueryunobtrusive-javascript

Angular/Bootstrap Card Components

I am in the process of developing a single-page website that showcases information about different episodes. I currently have a mongoDB set up where each of the 50 episodes is stored as a separate object. Using Bootstrap 4, I am encountering difficulty in ...

angularbootstrap-4

Using C# and AJAX to refresh the view with the latest model data

In my .NET web app, I have a process that involves navigating from Page A to Page B where I input a barcode scan result. Page B then displays a table generated by various queries and data inserted into a view model. What I am seeking is the ability to rep ...

javascriptc#.netajax

looping through a collection of objects with partially distinct attributes

How can you iterate over an array of objects to retrieve the results of every previous game played? I encountered difficulties while attempting to iterate over non-existent values. The desired result is an array structured like this: newArr: [ { ...

javascriptarrays

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. https://i.sstatic.net/xzMVY.png ...

javascripthtmljqueryajaxshopify

What is preventing the slider handle from being moved?

Having trouble getting the slider handle to move when testing it out. Could use some assistance on this matter. Included a Fiddle link for your reference. JavaScript Code: var current_plan = {}; var plans = [ { 'name' : 'Business&apo ...

javascriptjqueryslider

Steps for implementing a shake animation in Angular 6

Are you wondering how to achieve a shake animation using Angular 6 animations? The goal is to replicate the 'shake' animation found in Animate.css. ...

angularangular-animations

Tips for clearing all active setInterval methods before disconnecting

I need help finding a solution to clear all intervals before logging out. I have multiple intervals on various pages that continue running after disconnecting. Thank you. ngOnInit() { var firstInterval = setInterval(() => { this.get(); ...

angularionic-frameworkionic4

Getting the selection within a particular div – how can it be done?

Currently, I am working on a contenteditable div feature (identified by id 'editor1') which allows users to input text. Additionally, there is a function that enables users to highlight and change the color of selected text. In my JavaScript code ...

javascripthtmlcss

Error: The module '@angular/core' cannot be located

Currently, I am working on a simple Angular 2 project with NodeJS as the backend and my preferred editor is Atom. So far, I have successfully installed Angular2 (2.0.0-beta.17) and Typescript using npm. npm install angular2 npm install -g typescript Wit ...

node.jsangulartypescript