We Keep Coding

Text binding between input and span in Angular

How can I bind input texts to span innerHTML in Angular6?
ts file
...
finance_fullname: string;
...
template file
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" ngBind="finance_fullname"></span>

I can say most secure way would be innerText or textContent.
<span class="fullname" [textContent]="finance_fullname"></span>
<span class="fullname" [innerText]="finance_fullname"></span>
Even AngularJS were using textContent for one way binding. It only extract the model value and dump directly inside the specified html node. Even though if you pass html it will add that html as a text(decoded html) on the page.
Demo
innerHTML would also work for you, but it could be dangerous, as it will give a chance to inject malicious content on the page in form of html.

I don't know why you are reading from angularjs since you are working with angular 6.
If you want double binding just do it like this.
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

You can do it in two ways
(i) You can use [innerHTML]
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" [innerHTML]="finance_fullname"></span>
STACKBLITZ DEMO
(ii) Just bind using the two way data binding
STACKBLITZ DEMO
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

Is there any way to change style properties of an input value in javascript? [duplicate]

I'd like to set text in a textarea or text input using different colors (one or the other is fine, I don't need both). Think of something like simple syntax highlighting. So, let's say I have some keywords defined. I'd like those words to be colored a different color as the user types into the textarea or text input
I understand this needs to be some combination of CSS, Javascript, and maybe some pixie dust. I wondering which direction I need to dig into to find out how this can be done.
Thank you

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input. You'll need an editable element or document to achieve syntax highlighting. Example (works in all recent browsers; the last major browser not to support contenteditable was Firefox 2.0):
<code contenteditable="true">
<span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>

Are you finding this?
Use jQuery.colorfy
Code:
https://github.com/cheunghy/jquery.colorfy
Demo:
http://cheunghy.github.io/jquery.colorfy/
Screencast:
https://www.youtube.com/watch?v=b1Lu_qKrLZ0

This can actually be done by using styling inside of the tag, this is a reference from one of my websites where i have done this
<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
type="text"
required autofocus />

JQuery hide span outside of div

I am trying to hide a span but having some trouble doing so. I want to get all the spans based on their for tag value and simply hide them. My question is, is it possible to get span's where there for tag equals something?
For example:
<input type="text" id="Address1" />
<span for="Address1" class="field-error">Boo</span>
<input type="text" id="Address2" />
<span for="Address2" class="field-error">Hoo</span>
JSFIDDLE
JQUERY
$("#btn1").click(function() {
$("span.field-error").hide();
});
Thanks in advance, DS.

You may try this
$("span[for='Address1']").hide();
But it's not valid for span, instead you can use data- prefix for custom attributes, like
<span data-for="Address1">some text</span>
Then, js could be
$("span[data-for='Address1']").hide();
An example.

How do i show a selectbox when it is in <p> and i do p.text("test") in javascript?

In am working with MVC and i want to show a selectbox
<p id="selectedTrigger">
<select name="devices" id="devices"><!-- Here i get the options with javascript --></select>
</p>
If i do this it works, but when i do in javascript the next line of code:
$('#selectedTrigger').text("TEST");
It doesn't show the selectbox anymore, only the text TEST
How can i solve this problem?

What happens is you replace everything between <p id="selectedTrigger"> and </p>. If you are using jQuery then use .html() method to replace content inside it or use .append() to add content inside your <p>.
So in your instance you would have to say:
$('#selectedTrigger').append("TEST");
Note that this will result in following code:
<p ...>
<select ..></select>
TEST
</p>
There is also .prepend() method that allows you to append content before any content you already have.
$('#selectedTrigger').prepend("TEST");
This would give you:
<p ...>
TEXT
<select ..></select>
</p>
Solution:
But since you are trying to add options to your <select> inside your <p> you should really use this:
$('#devices').append("TEST");
This will give you:
<p ...>
<select ..>
TEST
</select>
</p>

JQuery and find on the TD Element for removing BR

I'm trying to figure out how to remove BR tags underneath a particular TD element with a specific ID. So far I've had no success. Here is some example code via jfiddle:
HTML:
<br>
<table border='1'>
<tr>
<td id="attachmentsOnClient">
<span dir="ltr">
<input id="ontidIOFile" type="file" />
<br>
</span>
<input id="fileupload1" type="file" />
<br>
<input id="fileupload2" type="file" />
<br>
</td>
<td>
Leave <br> This <br> Alone <br> Here
</td>
</tr>
</table>
Javascript onload:
$('#attachmentsOnClient').find('br').remove();​
​
Changing the HTML above so that it's no longer a table, but the "attachmentsOnClient" TD is a div, the above javascript works, however on a TD element it fails. I'm not sure if I'm selecting it correctly or not, this is only my second foray into JQuery
An example in jfiddle can be seen Here.
EDIT: As talked about below, the newlines are due to the formatting of the input file blocks through jfiddle. The JQuery itself is indeed working.

The reason you are seeing this is that the file upload input is rendered in part by the browser, but also by the operating system. For instance, different browsers will show them different, but also the same browser on different operating systems (windows 2000, windows xp, mac etc) will display them differently.
Your best bet here is to use some custom style using CSS with a combination of CSS where you use display: inline-block; on the container and some position:relative; on the input and then place there where you would like. You are also likely, due to the fact that you have multiple, have a need to put a class on each one so that you are able to position them relative to each other. You could add the class attributes either through the markup, or through the jQuery code for example.
EDIT NOTE: As proof that your jQuery IS working, the following alerts (3), then (0):
alert($('#attachmentsOnClient').find('br').length);
$('#attachmentsOnClient').find('br').remove();
alert($('#attachmentsOnClient').find('br').length);