Question

Image 2 (After we start entering the input)

在文本框中没有输入时，图标为灰色，但是一旦我们开始输入文本，图标应变为蓝色。

`

        <mat-icon svgIcon="user-icon-active" class="actvIcoCss" *ngIf="username?.length > 0" [ngStyle]="{height: '3vh', width: '2vw'}"></mat-icon>

        <div *ngIf="loginForm.controls['username'].errors && !loginForm.controls['username'].pristine" [ngStyle]="{'width':'190px','padding-left':'35px'}">
          <div class="wrnTxt">Please enter a valid Username.</div>
        </div>
        <br>`

Answer 1

可以在满足条件时使用ngClass指令添加CSS类。

<your-element [ngClass]="{'blue-css-class': username?.length > 0 }">...</your-element>

Answer 2

在html文件中：

<input [(ngModel)]="username">
<mat-icon [ngClass]="{'active': username.length > 0}"></mat-icon>

Css文件：

.active {
  color: blue
}

Component.ts：

username: string = ''

Answer 3

在login.component.css

.actvIcoCss.color_ash { color: #e9ecef; }
.actvIcoCss.color_blue { color: #9CB8EF; }

在login.component.html

中

<mat-icon class="actvIcoCss color_ash" *ngIf="isEmpty"></mat-icon>
<mat-icon class="actvIcoCss color_blue" *ngIf="!isEmpty"></mat-icon>

在login.component.ts

isEmpty = true;
const elem = document.getElementById('username').value;
if (elem > 0 ) {
   isEmpty = false;
}

您的输入字段应具有一个ID，并且该ID应在getElementById（“ MENTION_ID”）中提及。

如果文本中有任何条目，请更改图标

3 个答案: