What is the best way to connect input texts with the innerHTML of a span in Angular6?
Typescript file
...
finance_fullname: string;
...
Template file
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" ngBind="finance_fullname"></span>
The most foolproof method is to use either innerText or textContent.
<span class="fullname" [textContent]="finance_fullname"></span>
<span class="fullname" [innerText]="finance_fullname"></span>
Even AngularJS preferred textContent for one-way binding. It simply retrieves the model value and places it directly into the designated HTML element. Even if you pass html, it will display the HTML as text (decoded HTML) on the page.
Using innerHTML could also work, but be cautious as it opens up the possibility of injecting harmful content onto your page in the form of HTML.
It's interesting that you're referencing AngularJS even though you're currently using Angular 6. To achieve two-way data binding, here's a simple example:
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>
There are two ways to achieve this task
(i) One method is using [innerHTML]
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" [innerHTML]="finance_fullname"></span>
(ii) Alternatively, you can utilize two-way data binding
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>
When working in the render() method, I find myself passing numerous variables around. The recommended best practices suggest setting up variables before the return <div>...etc</div statement like this: const { products: mainProducts, ...
Having an issue with adding a new chapter to my var array. Here is the code snippet in question: array.push({ chapter: [ { id: 2, title: 'adsf', content: &ap ...
Let's say I have an iframe element in my HTML document. <html> <body> This is my webpage <button> Button </button> <iframe src="www.example.com"></iframe> </body> </html> If a user clicks on links wi ...
Can someone explain the purpose of Socket.IO using the io cookie as a session cookie? I understand that it can be disabled, but I couldn't find any information on it in the documentation. Why is it turned on by default and what consequences would ther ...
Whenever I send a delete request to my node.js server, it can only delete one item from my JSON file until the server restarts. If I attempt to make a second delete request, it successfully deletes the item but also reverts the deletion of the last item. ...
After reviewing a discussion on how to dynamically change code on clients' websites for serving ads, I am in search of an easy-to-implement solution. The code is frequently updated as we experiment with different ad networks like Adsense. Ideally, I w ...
I need to set up a Docker container containing the Angular application image to be served internally. This way, users can easily pull the image, run the application, and start developing without hassle. Here is my current Dockerfile: FROM node:20.11.0-alp ...
This is a snippet of code that handles user authentication and authorization const bcrypt = require("bcryptjs"); const jwt = require("jsonwebtoken"); const userRepository = require("../repositories/userRepository"); const SALT ...
I've managed to set up a navigation bar, but now I need to add more complexity to it. Specifically, I have certain links that should only be accessible to users with specific permissions. If a user without the necessary permissions tries to access the ...
I encountered a challenging bug that took a lot of effort to resolve, only to discover that it was due to two HTML elements having the same ID attribute. Is there a command available to identify duplicate IDs throughout the entire DOM? Update: After rev ...
Currently, I have the following script: exportPDF(id) { const options = { filename: 'INV' + id + '.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, dpi: 300, letterRendering: true, useC ...
I'm currently utilizing data-tables (with jQuery) on my website. The particular data-table I have implemented seems to be consuming excessive memory in javascript, causing a slowdown in other functionalities. Is there a way for me to de-initialize th ...
I'm currently working on a React lightbox that is supposed to display a loop of objects containing images and text. However, I'm facing an issue where the images are not showing up with the corresponding text label as intended. It seems like I a ...
This tel-input plugin was developed by Jack O'Connor. You can find the plugin here: https://github.com/Bluefieldscom/intl-tel-input I have observed that the flags take approximately one second to download, and I would like to enhance this process wi ...
Wondering how to ensure that the click handler is always attached in my Rails 4.1 app where I am using JQuery-ujs to update cells in a table within the comments#index view. In my comments.js.coffee file, I have the following code snippet: jQuery -> ...
After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...
I need help transferring my arraylist from a managedBean to JavaScript code. The bean code is shown below: public void getDataAsJson(){ String [] dizi={"Tokyo","Jakarta","New York","Seoul", "Manila","Mumbai","Sao Paulo","Mexico City", ...
The index.d.ts file in React contains an interface definition that includes the following code snippet. Can you explain the significance of the third line shown below? (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | nu ...
I have been attempting to implement a custom validator to validate if an email is already in use. After consulting the documentation and reading various articles, I have come up with the following code: In my auth.service.ts file checkEmail(email) { ...
How can I extract the "title" values from this JSON array using JavaScript? I need to retrieve all the "title"s and store them in a new array like shown below: array( `hey title1`, `hey title2`, ... ) I am unsure of the number of titles we will receive, b ...