要在Angular Material的芯片中使用ngClass,您可以按照以下步骤操作:
npm install @angular/material @angular/cdk
import { MatChipsModule } from '@angular/material/chips';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatChipsModule,
MatButtonModule,
MatIconModule
]
})
export class YourModule { }
Chip
在这个示例中,我们使用了一个名为isActive的布尔变量,它决定了芯片是否具有active-chip类。根据您的需求,您可以根据不同的条件来设置isActive变量。
isActive: boolean = false;
// 在某个事件或条件下设置isActive为true
setActive() {
this.isActive = true;
}
// 在某个事件或条件下设置isActive为false
setInactive() {
this.isActive = false;
}
.active-chip {
background-color: blue;
color: white;
}
在这个示例中,active-chip类将芯片的背景颜色设置为蓝色,并将文本颜色设置为白色。您可以根据需要自定义样式。
这样,您就可以根据条件动态激活或取消激活芯片,并根据其状态应用不同的样式。