Detailed explanation of several ways to add css classes to HTML elements in angular

This article will introduce to you several ways to add css classes to HTML elements in angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Mainly explores several implementations of dynamically adding classes to HTML elements in Angular, including the use of the className directive, the use of NgClass, etc. ​ [Related recommendations: "angular tutorial"]

Native JavaScript adds a class to the element

The main code is:

let element = document.getElementById('exampleTarget');

element.className = 'additional-class'

A more specific explanation is in the usage of className, so I won’t go into details here.

Use [className] attribute binding to add css classes in Angular

You can simply use className to bind the class to our HTML element :

<div [className]="&#39;example-class&#39;">

</div>

Of course, it doesn’t make much sense to use this attribute to bind static classes. We can bind related classes according to conditions:

<div [className]="condition ? &#39;condition-true-example-class&#39;: &#39;false-example-class&#39;">

</div>

In condition is# When it is ##true, the condition-true-example-class class will be added, and when it is false, the false-example-class class will be added. .

Similarly, we can also write other simple judgments:

<div [className]="&#39;example-class&#39; + variableValue">

</div>

Css class for switching based on conditions

When switching based on certain conditions When it comes to css classes, the above method is a bit cumbersome:

<div [className]="condition ? &#39;condition-true-example&#39;:&#39;&#39;">

</div>

is neither beautiful nor easy to understand.

We can use:

<div [class.example-class]="condition">

</div>

to achieve the above requirements.

Better use of the ngClass directive

All the above methods of adding classes can be replaced by

ngClass.

This instruction is just syntax sugar, which can make the code look more concise and clear.

Like we use the

ngClass directive to complete the above two examples:

<!-- 替代 className 属性绑定 -->
<div [ngClass]="{
    &#39;condition-true-example-class&#39;: condition,
    &#39;false-example-class&#39;: !condition
}">
  
</div>

<!-- 替代基于条件切换 class -->
<div [ngClass]="{&#39;example-class&#39;: condition}">
  
</div>

In addition to the above methods,

ngClass There are some other commonly used Method:

<!-- 添加单个类 -->
<div [ngClass]="&#39;example-class&#39;">
  
</div>

<!-- 添加多个类 -->
<div [ngClass]="[&#39;example-class&#39;,&#39;example-class-2&#39;]">
  
</div>

For more usage methods, please check:

Official Document

It should be noted that:

If in the component Use

HostBinding in the ts file to add multiple classes:

export class AppExampleComponent implements OnInit {
  @HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
  // ...
}

Then when using it, you cannot pass

class,className, ngClass, add a class.

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Detailed explanation of several ways to add css classes to HTML elements in angular. For more information, please follow other related articles on the PHP Chinese website!