How to Make Words Stand Out in a Textbox using Angular NgStyle and input::first-line Trick?

Is there a way to highlight the text in a textbox using Angular and Material design? I've tried the code below but it's not working for me.

I'm looking to apply the highlighting conditionally based on a boolean variable called 'highlightTextFlag', possibly using ngStyle.

Example:

input::first-line { 
   background-color: green !important; 
}

Current code:

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [ngStyle]="{'input::first-line': 'green' }"
    >
</mat-form-field>

https://i.sstatic.net/1U7k9.png

How to highlight text inside an input field?

Angular Material: Highlight Words in a Textbox

Answer №1

To implement the CSS styling within your component, assign a class name instead of using the input selector in the following manner:

.myStyle::first-line{
//your css
}

Next, link this class name to a Boolean variable in your component template as shown below:

<mat-form-field>
    <mat-label>Example</mat-label>   
    <input
        matInput 
        [class.myStyle]=“myBooleanValue”
    >
</mat-form-field>

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

Using TypeScript to import npm modules that are scoped but do not have the scope name included

We currently have private NPM packages that are stored in npmjs' private repository. Let's say scope name : @scope private package name: private-package When we install this specific NPM package using npm install @scope/private-package It ge ...

Exploring the methods to update axios request configuration

Whenever a request is made to the backend, an access token is sent along with it. If the token fails verification, the original request configuration is saved and a new request is made to update the tokens. If the verification is successful, the original ...

I don't understand what's happening with this ternary format in the Typescript function - something seems off

Exploring Typescript. While browsing through a project's codebase, I stumbled upon the following snippet and am unsure of its validity. Can anyone shed light on what this code is doing? It seems to be dealing with default values, but I'm not enti ...

The Angular material Datepicker is encountering a conflict where multiple custom value accessors are trying to match a form control with an unspecified

Recently, I integrated a material datepicker widget into my Angular (7) application. The HTML code for this implementation is provided below. <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Expiry Date" [formControl]="expi ...

There was a parsing error due to encountering an unexpected reserved word 'interface' in the code, as flagged

I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...

How can we effectively test arrow functions in unit tests for Angular development?

this.function = () => { -- code statements go here -- } I am looking to write jasmine unit tests in Angular for the function above. Any suggestions on how to achieve this? it("should call service",()=>{ // I want to invoke the arrow funct ...

The test case for creating a component in Jasmine titled "should create" threw an error and failed with a TypeError stating: "FAILED TypeError: Cannot read property 'next' of undefined"

One of the key components in my application is responsible for fetching data from the store. @Component({ selector: 'iomt-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss'] }) export class ...

Angular: custom configurations for individual modules within a shared module

I am facing a challenge with my shared module, as it provides components used by multiple other modules. Some of these components require specific configuration settings. Each module utilizing the shared module needs to supply unique configuration setting ...

Modify the variable's value depending on a different variable's value

When "a" changes in the example below, I would like "b" to also change. Currently, I am utilizing a method that utilizes the onfocusout function to capture the change event of the "a" input. Is there an alternative built-in way to achieve this? @Compone ...

Guidelines for integrating a SOAP asmx service into an Angular+8 application using XML implementation

Here is the code snippet I'm struggling with: var xmlItemAll = '<?xml version="1.0" encoding="utf-8"?>' + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:x ...

Unspecified parameter for Next.js dynamic route

Currently, I am developing an e-commerce application using next.js with Typescript and MongoDB. To better understand my project, let's take a look at my existing file structure: https://i.stack.imgur.com/tZqVm.png The mainPage.tsx file is responsibl ...

Having difficulty grasping the concept of a component in Angular that utilizes a service which incorporates the HttpModule

I just started learning Angular and I'm grappling with a testing issue. After studying how the framework functions, I noticed that a component using a service which incorporates HttpModule requires the HttpModule to be imported in the component test ...

Mono repo project utilizing Angular 4+ and Typescript, enhanced with Bootstrap styling

Looking for a project to practice with Angular 4+ using Typescript and a Bootstrap template. Hoping for a setup where I can just run npm install and ng serve to start. Any recommendations for mono repos would be highly valued! ...

Setting up an inline style @Input in Angular 2: A step-by-step guide

I am currently working on a component that needs to display random values, which will be generated randomly and passed through some @Input bindings in the template. Everything seems to be going well, but I am facing an issue when trying to link an @Input t ...

Guidelines for creating a rectangular selection tool in Angular 2+ to choose multiple items

Hello, I am interested in learning how to draw a rectangle to select multiple items using Angular 2+. I currently have a working Plunker example where I would like to implement the ability to select items by drawing a rectangle similar to this jsfiddle I ...

Repetitive execution of Angular service function upon route change

In my Angular 8 project, there is a service function responsible for copying data. However, I encountered an issue where if I copy the data on a page, navigate to another page, and then return to the original page to copy the data again, it ends up duplica ...

Using IIS to automatically redirect HTTP requests to HTTPS for the identical domain names on the same IIS server

I have a unique scenario to address: There are multiple sites hosted on the same IIS server: sub.domain.com - this site has HTTP on port 80 and HTTPS on port 443. The redirection from HTTP to HTTPS works perfectly using the provided method: <con ...

What is the reasoning behind triggering ValueChanges during initialization even when there are no changes detected?

I am working with a popup component that includes a mat-datepicker. When the user changes the date, I need to update this value in another control and ensure that the start and end controls are valid. However, due to a bug in the mat-date-range-input, I ...

What is the reason behind the restriction on creating circular dependencies in Ionic applications?

Working with Ionic, I have created 2 services to provide data: export class DocumentService { constructor(favorisService: FavorisService) { } async GetById(id: number): Promise<DocumentModel>{ let path = this.favorisService.getPath(); ...

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

I am struggling to add a dynamic Vue 2 component with correct typing in TypeScript. The documentation clearly mentions that the is attribute accepts values of type string | ComponentDefinition | ComponentConstructor, but I cannot locate these custom types ...