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

【问题标题】：Angular: NgStyle Highlight Words in a Textbox using input::first-line?Angular：NgStyle使用input :: first-line突出显示文本框中的单词？
【发布时间】：2020-11-19 15:49:21
【问题描述】：

如何在 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?

Angular Material: Highlight Words in a Textbox

【问题讨论】：

标签： angular typescript angular-material ng-style angular10

【解决方案1】：

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

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

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

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

【讨论】：