obtain every drop-down choice from Angular 2's selectiongetConfig() function

Within the document, there is a select element as shown below:

<select tabindex="1" size="5" name="abc" multiple>
    <option value>Select a value.</option>
    <option value>option 1</option>
    <option value>option 2</option>
    <option value>option 3</option>
    <option value>option 4</option>
</select>

In JavaScript/TypeScript, I can access it like so:

    let select = document.querySelector("select").children;
    for(let i= 0; i<select.length; i++) {
        console.log(select[i].innerHTML);
    }

However, when attempting the same in an Angular 2 class, the result differs:

<select tabindex="1" size="5" name="abc" multiple>
    <option value>Select a value.</option>
    <option value>__</option>
    <option value></option>
</select>

This discrepancy could be due to Angular 2 executing before the full document loads. Despite trying to run scripts at various points such as

window.onload and $(document).ready(...);

The options are still not being retrieved. Any suggestions?

Answer №1

It's not recommended to directly manipulate the DOM in Angular.

@Directive({ selector: 'option' })
export class OptionDirective {}

xxx.component.ts

@Component({
  selector: 'some-selector'
})
export class SomeComponent implements AfterContentInit {
  @ContentChildren(OptionDirective) options: QueryList<OptionDirective>;

  ngAfterContentInit() {
    // Process list items
    // Iterate through all the option lists and perform desired actions.
  }
}

@ContentChildren

QueryList

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

What is the process for creating a modal transition?

I am attempting to add animation to a modal using a transition effect. My goal is to open it slowly, either from the center of the screen or from the bottom. However, I am struggling to understand how this can be achieved... While searching on Google, I c ...

How to pause a loop temporarily before proceeding with the next iteration

I am facing a challenge where I want to trigger two events simultaneously, but only one event should be allowed to continue at a time. If an event is already in progress, I need the ability to forcefully stop it and allow the other event to take control. S ...

Having trouble applying CSS while printing using the ngx-print library in Angular 14. Can anyone help me out with this issue

The table shown in the image is experiencing issues with applying CSS properties when printing. While the background graphics feature has been enabled, the preview section still does not reflect the CSS styling. What could be causing this discrepancy? Cli ...

The act of splicing an array in React causes continuous rerendering

Within the update(changeProps) function, my code resembles the following: update(changedProps) { if (this.person) { this.__arr = ['hi', 'hi', 'hi']; } else { this.__arr = ['bye', &apos ...

Exploring the contents of a dropdown menu by navigating through a tree structure in React JS

A unique custom component has been developed, featuring a dropdown with a tree-like structure inside that allows users to search for values. However, it seems that the search function only works after reaching two levels of the tree structure. Currently, ...

Modify the text in a paragraph by clicking on a link using JQuery and HTML

I'm attempting to implement a straightforward action, but I'm facing some challenges. My navigation bar consists of a few links followed by a text section. What I aim for is that when I click on a link, the paragraph of text should change to refl ...

The persistent issue of Angular Material's matTooltip failing to disappear even after navigating to a different page

I have encountered an issue with the matTooltip in my Angular project. When I press a button that has a tooltip attached and redirects me to another page, the tooltip remains visible in the same position even after redirecting. I know that changing the "tr ...

A more intelligent approach for generating JSON responses using Mysql

Here is the code I have on my server side using Node.js: var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: 'SOMEUSER', password: 'SOMEPASSWD', database: 'SOMED ...

There seems to be an issue with React js Stripe checkout functionality not being

I am attempting to integrate a default Stripe checkout form into my React.js application. <form action="/your-server-side-code" method="POST"> <script src="https://checkout.stripe.com/checkout.js" className="stripe-button" data-key="pk_ ...

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

Waiting for data to be passed from a parent component within a method

I have a situation where I need to make an API call in my layout and send the received data as an object to my component. The problem arises because the object is empty when the method is called inside the mounted() function. Therefore, I want to execute ...

Terminating a client connection in Node.js using socket.io

What is the best way to terminate the socket connection on the client side? I am currently utilizing: socket.io 0.9 node.js 0.10.15 express 3.3.4 For example, when calling localhost/test -- server side var test = io .of('/test') .on(&apos ...

Discovering ways to extract precise information from a JSON response through API using AJAX. The structure of the JSON data appears unusual and

This sample code contains a thesaurus of synonyms. The search term is "refund". Below are the provided codes: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> ...

Load charts.js synchronously into a div using XMLHttpRequest

At the moment, there is a menu displayed on the left side of the page. When you click on the navigation links, the page content loads using the code snippet below: if (this.id == "view-charts") { $("#rightContainer").load("view-charts.php"); $(thi ...

ngAnimateSwap - animations do not function as intended when boolean expressions are utilized

I adapted the original ngAnimateSwap demonstration from the AngularJS documentation to utilize a boolean expression for triggering the slide animation. Initially, I anticipated the banner to switch back and forth between 'true' and 'false&a ...

Utilizing VueMq for personalized breakpoints and module inclusions

In my main app.js, I set and define breakpoints by importing the VueMq package. import VueMq from 'vue-mq'; Vue.use(VueMq, { breakpoints: { xsmall: 500, small: 768, medium: 1024, large: 1360, x ...

Create personalized HTML elements for JSON keys following a recursive loop in JavaScript

When I click, I loop through a JSON object to display it in HTML, but the current display is too generic with everything in a P tag. My goal is to create custom elements based on the key of the object and to hide items with null values. Here's what I ...

Passing parameters by reference in TypeScript

It is possible to pass parameters by reference in C#. For example: private void Add(ref Node node) { if (node == null) { node = new Node(); } } Add(ref this.Root); After executing Add(ref this.Root), th ...

My function seems to be functioning perfectly fine in Angular and Express, but for some reason, it's not working in Parse Cloud Code. What could

I am facing an issue with my code where it seems to be stuck. After testing it in both Angular and Express, I realized that the code is only progressing up to a certain point due to the requirement of the Master Key to edit the User table with new data. ...

What causes queryAsync() to generate additional metadata?

Following the instructions provided in a response to a question, I utilized queryAsync() and it is functional. However, it is appending excessive meta data to my query result, which was initially a simple query. This is the code snippet I am using to exec ...