Angular如何有条件地改变css类?



我有一个默认类的图标,类名是card-icon,现在我如何根据条件更改类或禁用类?

因为图标的默认颜色现在是灰色的,当条件满足或条件为真时,我想把它改为黑色。

条件如下,当条件为真时禁用class="card-icon"或者如果不可能禁用,则在新类(例如[class])出现时替换。终极].

你们知道怎么实现这个吗?谢谢你。

#图标默认类

<mat-icon class="card-icon">group</mat-icon>

#条件
<mat-icon class="active-icon" [class.newclass]="currentTabElement === 'group'">group</mat-icon>

你可以在angular中使用ng class属性来切换CSS类作为一个例子,如果我想创建一个切换按钮,需要在深色背景和浅色背景之间切换,我可以做以下更改:

HTML文件
<div [ngClass]="{'black-background':blacked, 'white-background':!blacked}">

CSS/SCSS file

.black-background {
background-color: #000;
}
.white-background {
background-color: #FFF;
}

打印稿文件在typescript文件中,你需要有属性blacked值,我们在HTML标签中传递的值需要是truefalse

blacked = true;

现在,blacked的值为真,所以black-background的值为true,所以现在我们可以看到黑色的背景。如果属性为blacked=false;,则white-background的值为true,因为我们传递了white-background:!blacked。这样我们就可以在CSS类之间切换了

使用ngClass.

<mat-icon [ngClass]="{'card-icon': true, 'active-icon': currentTabElement === 'group'}">group</mat-icon>
上面的代码将把card-icon类添加到所有图标,active-icon只有当条件currentTabElement === 'group'求值为true时

相关内容

  • 没有找到相关文章

最新更新