本篇文章给大家介绍一下angular中为html元素添加css类的几种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现，包括 className 指令的使用，NgClass 的使用等。 【相关推荐：《angular教程》】
原生 JavaScript 为元素添加一个类
主要代码是：
let element = document.getElementById('exampleTarget');
element.className = 'additional-class'更具体的解释在 className 的用法 ，这里不在赘述。
使用 [className] 属性绑定在 Angular 中添加 css 类
可以简单的使用 className 为我们的 HTML element 绑定类：
立即学习“前端免费学习笔记（深入）”；
当然使用此属性绑定静态类并无太大的意义，我们可以根据条件绑定相关的类：
在 condition 为 true 的时候，会添加 condition-true-example-class 类，为 false 的时候会添加 false-example-class 类。
同样，我们还可以写入其他的简单的判别：
基于条件切换 css 的类
当基于某些条件切换 css 的类的时候，上述的方式就稍显繁琐：
既不美观也不太好理解。
我们可以使用：
来实现上述的需求。
更好的使用 ngClass 指令
上述的所有添加类的方式，都可以使用 ngClass 来替代。
该指令只是语法糖，可以是代码看起来更加简洁明了。
像我们使用 ngClass 指令来完成上面的两个示例：
除了上述的方式， ngClass 还有一些其他的常用方式：
更多使用方式请查看： 官方文档
需要注意的是：
如果在组件的 ts 文件中使用 HostBinding 添加了多个类：
export class AppExampleComponent implements OnInit {
@HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
// ...
}那么在使用的时候，则不能在通过 class 、className 、ngClass ，添加类。
更多编程相关知识，请访问：编程入门！！
