Angular: NgStyle Highlight Words in a Textbox using input::first-line?

Question

How do I highlight the contents of a textbox in Angular? the following is not working. Currently using Material textbox.

Need to apply it conditionally, based on boolean variable highlightTextFlag, maybe with ngstyle .

Sample:

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

Actual code:

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

How to highlight text inside an input field?

Angular Material: Highlight Words in a Textbox

score 1 · Accepted Answer · edited Jul 30 '20 at 09:36

You can add the css in your component css file, but use a class name instead of the input selector as following:

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

And bind the class name to your Boolean variable in the component template as follows

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [class.myInput]=“myBooleanVar”
    >
</mat-form-field>

Angular: NgStyle Highlight Words in a Textbox using input::first-line?

1 Answers1