时间戳

首页 > 解决方案 > 更改图标如果文本中有任何条目

angular - 更改图标如果文本中有任何条目

问题描述

图1（输入前）

图2（我们开始输入后）

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

`  

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

标签： angularangular6

解决方案

满足条件时，您可以使用 ngClass 指令添加 css 类。

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

推荐阅读