We Keep Coding

How to force angular to create the property in html when using bind [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 months ago.
Improve this question
I need angular to create the property in my html when I use a 'property binding', but angular only creates it when I write the value directly in the html.
I left a very basic example on stackBlitz, a 'button' component that receives the primary or secondary type and depending on the type of the button it changes the color correctly, but when I check the element, the property is not created typeButton on the button that uses the property binding and in my real application I need this property to be created in the html.
link stackBlitz: stackBlitz

try it:
#Component({
...
host: {
'[attr.typeButton]': 'typeButton',
},
})
for example:
https://angular.io/guide/accessibility#case-study-building-a-custom-progress-bar

Edit :
Please try this for the attribute binding :
#HostBinding('attr.typeButton')
#Input('typeButton')
typeButton: string;
You are not looking at the right place.
The first button is showing a property because there is hardcoded Input value. So it looks like a "regular" property. But actually, the property is indeed binded in both the button in the HTML by Angular #Input :
So basically, I'd say that Angular does what is expected from him, it's placing the attribute in the button like so : [attr.typeButton]="typeButton"
The first button is not "responding" to the changes because the value is hardcoded.
Cheers
Alain

Capture updated text from h tag after change in input field [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am new to Javascript.So please excuse me if I am asking anything silly. I have a sample Shiny application Statistics Dashboard which can be used to find some basic statistical measures such as Mean, Median etc. for any metric. Users have to upload a csv file based on which the dashboard selects all the numeric variables within the file and provides an option to select any numeric variable to analyze as a dropdown. I want to add a javascript code in the application which will capture the updated measures (e.g. mean) after a user has selected a particular dimension from the dropdown. For example, suppose the default selected dimension in the dropdown window is "sales" and the corresponding mean is 325. If I select another dimension (suppose) "profit" then the mean changes to 37. Now I want to add a javascript/jquery code which will capture the mean value of 37 when I select "profit" (from "sales") from the dropdown. I have tried the .change event to check for the change in the dropdown selection and when there is a change, capture the mean value inside the h3 tag. However, I am getting the previous mean value instead of the updated one i.e. I am getting 325 instead of 37 when I select "profit" (from "sales"). Hope I am clear on this.
Am I using the wrong event? How can I capture anything after a certain action occurs and the values are updated?
Feel free to let me know if you need any more details on my query. Looking forward to the help from the community.

I think this is Exactly what you are looking for
Here is a code which will detect any changes in a certain element.
HTML:
<input type="text" id="Profit"></input>
<h3 id="MeanLabel">100</h3>
Javascript/Jquery:
$(document).ready(function() {
$("#Profit").on("change", function()
{
$("#MeanLabel").text(this.value);
});
initialValue = $("#MeanLabel").text();
CheckChanges();
})
function CheckChanges()
{
if($("#MeanLabel").text() != initialValue)
{
//The Label Changes!
initialValue = $("#MeanLabel").text();
alert("New Label is: " + initialValue)
}
setTimeout(CheckChanges, 200)
}
This is the working sample.
https://jsfiddle.net/h68nxu4h/

Jquery add index to name attribute when adding input elements [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am creating a dynamic table. Below is the Jquery for add function. Does anyone know how to dynamically change var "i" in the name attribute of the input field? For example, when I add row one, it should be uploadForms[1].name. Thanks!
$(document).ready(function(){
var i=1;
$("#add").click(function(){
var input1 = $(document.createElement('input'))
.attr("name", "uploadForms[i].name");
input1.appendTo("#uploadFormsTable");
})
});

change .attr("name", "uploadForms[i].name"); to .attr("name", "uploadForms["+i+"].name"); so you can access to the variable instead of applying a string

How can I dynamically retrieve data from a form? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
In my code (HTML and JS), I have a form with two fields; field A and field B. I want to write the JS code that will get the data from field A and use it to set the default value for field B. Can someone help me do that?

If you decompose the problem into smaller pieces, there appear to be three components:
Get value from Field A
Set value of Field B
Trigger the event
Let's start with the first one...
There are lots of ways to reference an element. Let's assume for a moment that your element has an id:
<input type="text" id="fieldA" />
Given that, we can get its value:
var valueOfFieldA = document.getElementById('fieldA').value;
Now that we have the value, let's move on to the second component...
Similar to above, all we have to do is reference the element. Once we have that, we can set its .value property just as easily as we can read it. Let's assume another id in the markup:
<input type="text" id="fieldB" />
Given that, we can set its value:
document.getElementById('fieldB').value = valueOfFieldA;
Finally, we want to trigger this. Should it be when a button is pressed? When something else happens? For now I'm going to assume it should be when the value of Field A changes, so let's attach the code to the event handler for the change event of Field A:
document.getElementById('fieldA').onchange = function () {
var valueOfFieldA = document.getElementById('fieldA').value;
document.getElementById('fieldB').value = valueOfFieldA;
};
Assuming that the elements exist at the time this code runs and that it's able to find them by their id properties, this final result should assign a function to the change event of Field A such that whenever its value changes the value is then set to Field B.

Is it possible for javascript to determine whether a checkbox has been checked or unchecked? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
On my current project i am creating a search function that dynamically updates the content as users select different search criteria. As my title states i want to know whether a user has check or unchecked a particular item so that my JavaScript code can appropriately adjust the content.
Using jQuery i can easily tell if someone has hit the checkbox, but I don't know how to tell whether it is or isn't checked?
example:
<label class="checkbox"><input type="checkbox" id="checkbox1"> Any in Manhattan</label>
User clicks on it and i would like my jquery to do something like:
$( "#checkbox1" ).on( "click", function( event, ui ){
if("#checkbox1" === "clicked"){console.log("check it out!");}
});

You can use is:
$("#myCheckbox").is(":checked")
Which will return true if at least one item in the set is checked. In this case the set would be the (hopefully) singular element with the id myCheckbox.

Use the .checked property of the checkbox object rather than just detecting that it was clicked. As you have pointed out, just a click alone doesn't mean that it is checked because they might have clicked to uncheck it just as likely as they might have clicked to check it.
If you show us the related parts of your code we can tell you precisely how to do this in the context of your program. (For instance, you mentioned that you "can easily tell if someone has hit the checkbox." So if you put that part of your code into your question, we can show you how not only to tell if the checkbox is "hit" but also to tell if it is checked, using either the native .checked property or a jQuery selector.)
Using your code example, we can do this:
$( "#checkbox1" ).on( "change", function( event, ui ){
if(this.checked){console.log("check it out!");}
});
It is better to use change instead of click for various reasons.
Update: there is more discussion here: jQuery checkbox checked state changed event
Update 2:
Working JS Fiddle with the above code snippet: http://jsfiddle.net/cookies/NDjCT/