Angular：NgStyle 使用 input::first 行突出显示文本框中的单词？

Question

如何在 Angular 中突出显示文本框的内容？以下不起作用。当前正在使用 Material 文本框。

需要有条件地应用它，基于布尔变量 highlightTextFlag，可能使用 ngstyle 。

样本：

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

实际代码：

<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?

Answer 1

您可以在组件 css 文件中添加 css，但使用 class 名称而不是输入选择器，如下所示：

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

并将 class 名称绑定到组件模板中的布尔变量，如下所示

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

Angular：NgStyle 使用 input::first 行突出显示文本框中的单词？

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

typescript

ng-style

angular-material

angular

angular10