Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white.

<textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea>

The connected string contains multiple variables.

return this.outputText = this.test1 + " test1Stat" + this.test2 + " test2Stat" + this.test3 + " test3Stat";

I am looking for a way to display "test1 test1Stat" in red if test1 is less than 1, while displaying everything else in green. Is there a method to achieve this?

htmlcssangulartypescript

Answer №1

Unfortunately, coloring specific parts of text within a textarea is not feasible.

However, an alternative approach would be to utilize the 'contenteditable' property instead.

.greenText{
color:green;}

div{
border:black solid 1px;
padding:20px;
}
    <div contenteditable="true">text text <span class='greenText'>GREEN TEXT</span> more text that you can edit</div>

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

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

jqueryhtmlcss

The query for PrManagerBundleEntityeb_user is missing the identifier id

In an attempt to delete an object by its ID from the database using the following code in the frontend, I encountered an issue where the link does not function as expected. Here is the error message that I received: The identifier id is missing for a quer ...

phpangularsymfonydoctrine

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

I am currently working with QuickBase, a platform that involves HTML. My goal is to develop a code that can take a [fixed date] (always in the past) and increment it by 3 months until the MM/YYYY exceeds or equals the MM/YYYY of the [creation date]. Once t ...

javascripthtmldateif-statementquickbase

Incorporating a spectrum of hues into an HTML document

As a beginner in HTML, I recently stumbled upon a website (YT video) showcasing a stunning array of colors on buttons. You can check it out here: https://www.youtube.com/watch?v=OPaLnMw2i_0 I'm curious if these colorful designs can be applied to text ...

htmlreactjscolorsnext.js

Designing a multi-platform web browser application for Android, iOS, and Windows 10

I've developed several web applications using HTML5 technology and now I'm interested in creating my own custom web browser specifically tailored for my apps/sites. I want it to have a native appearance, but essentially just wrap around my web ap ...

androidioshtmlgoogle-chromebrowser

Connecting a custom bootstrap stylesheet to WordPress

I'm having trouble linking my WordPress Stylesheet to a child theme in a different directory/subfolder. The code I placed in the functions.php file doesn't seem to be working correctly. Here is the code snippet: function theme_add_bootstrap() { ...

csswordpresstwitter-bootstrap

PHP Ajax login form to instantly authenticate without redirecting to a new page

After attempting to implement Ajax in my login form by following two different tutorials, I am still facing the issue of error messages redirecting to another page instead of displaying on the same page. I have tried to troubleshoot and compare my code wit ...

javascriptphpjqueryhtmlajax

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

htmlcss

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

htmlcssnode.jshttp

Find the position of an HTML5 canvas element within a webpage

I am currently facing an issue with a canvas within another canvas. <canvas id ='canvas2' height="718" width="1316"></canvas> The CSS for this canvas is as follows: #canvas2{ position:absolute; width :95%; height:90%; top:5%; lef ...

javascripthtmlcanvas

Is it possible to display this code through printing rather than using an onclick event?

I have a puzzle website in the works where users select a puzzle to solve. I am looking for a way to display the puzzles directly on the website instead of using pop-up boxes. I am proficient in various coding languages, so any solution will work for me. ...

javascriptjqueryhtmlcss

JavaScript utilizing an API to retrieve specific data values

Below is some API Data that I have: [ { "symbol": "AAPL", "name": "Apple Inc.", "price": 144.98, "changesPercentage": -1.22, "change": -1.79, ...

javascripthtmlcssajaxapi

Incorporate a generic type into a React Functional Component

I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...

javascriptreactjstypescript

React Nested Grid with Material-UI

https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...

cssreactjsgridmui

What are the best techniques for styling the aria label element in HTML?

Looking to enhance the appearance of a button label upon hover. Curious about how I can customize the aria-label element to resemble the design in the screenshot provided below. ...

htmlcsslabel

Mantine - Showing search results in a scrollable list that stops at the parent's height and then adds vertical scrolling

I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw. The main app itself should not have any vertical or horizontal scrolling, but individual components/divs wi ...

cssreactjsflexboxcss-gridmantine

Angular 5: There was an issue with the property not defined for lowercase conversion

I keep encountering this error whenever I attempt to filter a column of a table. The data is retrieved from a FireStore cloud collection and the 'auteur' field is defined in each document. Here is how my component looks: import { Component, OnI ...

javascriptangularangular5

The service being injected is not defined

Two services are involved in this scenario, with the first service being injected into the second service like so: rule.service.ts @Injectable() export class RuleService { constructor( private _resourceService: ResourceService ){} s ...

angulartypescriptangular2-services

What steps can be taken to resolve the "value" parameter exceeding the range error in Protractor?

Currently, I am utilizing Angular 7 in combination with Protractor for end-to-end automated test cases. Additionally, I have incorporated BrowserStack for testing my project across multiple browsers. Within my project, there is an image upload feature for ...

angularseleniumselenium-webdriverprotractorbrowserstack

Option to modify the arguments of a method in a parent class

I encountered an interesting problem recently. I have two classes: class Animal { public talk() { console.log('...'); } } and class Dog extends Animal { public talk(noise: string) { console.log(noise); super.talk() } } The i ...

typescriptinheritanceparent-child