Detailed explanation of several ways to add css classes to HTML elements in angular-JS Tutorial-php.cn

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

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

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'

Copy after login

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

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

You can simply useclassNameto bind the class to our HTML element :

Copy after login

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

Copy after login

Inconditionis# When it is ##true, thecondition-true-example-classclass will be added, and when it isfalse, thefalse-example-classclass will be added. .

Similarly, we can also write other simple judgments:

Copy after login

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:

Copy after login

is neither beautiful nor easy to understand.

We can use:

Copy after login

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

ngClassdirective to complete the above two examples:

Copy after login

In addition to the above methods,

ngClassThere are some other commonly used Method:

Copy after login

For more usage methods, please check:

Official Document

It should be noted that:

If in the component Use

HostBindingin thetsfile to add multiple classes:

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

Copy after login

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!