What are the methods of style binding in Angular 2+

This article mainly introduces the method of parsing Angular 2 style binding. Now I share it with you and give it as a reference.

Introduction

It has been a year and a half since I started developing ngx (angular 2 will be directly called ngx). I still use the RC version of angular2, but now angular5 has been released. Time flies!

ngx has been a component-based framework from the beginning of its design, so everything from a page to a button is a component.

This involves the reuse of components. When designing universal components, dynamic style binding is essential.

Looking back, angular really provides us with several methods of property binding.

Next let’s take a closer look at how to use style binding in components.

style binding

[style.propertyName]

We have a button, the default The style is primary, of

bootstrap

. If the size of the button is different in different pages, you need to dynamically bind the font size of the button at this time. You can use [style.propertyName] to achieve.

Code in template

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize">
  Style Binding
</button>

Code in Component class

private fontSize: string = "2em";

The result is as shown:

##If we still need Dynamically set the border radius of the button

border-radius, the code in the

template becomes:

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize"
  [style.borderRadius]="borderRadius">
  Style Binding
</button>

The code in the Component class becomes:

private fontSize: string = "2em";
private borderRadius: string = "10px";

The result becomes:

It is not easy to use [style.propertyName] to bind style properties, but once there are new needs, we need to continue to add our Attributes that need to be bound. At this time, there will be more and more attributes bound to the component. Is there any way for us to create an

object to store the attributes we need to bind? Of course, [ngStyle] can help us do this.

[ngStyle]

So in the above example, we can directly use

[ngStyle] to dynamically bind the font of the button -size and border-radius. The code in

template becomes:

<button 
  class="btn btn-primary" 
  [ngStyle]="btnStyle" >
  Style Binding
</button>

The code of the Component class becomes:

private btnStyle: any = {
  borderRadius: "10px",
  fontSize: "2em"
};

The result is:

[style.propertyName] vs. [ngStyle]

[style.propertyName] can only bind one property at a time

while [ngStyle] Multiple properties can be bound at the same time

When [style.propertyName] and [ngStyle] are bound to the same property, for example, both need to be dynamically modified

font-size, [style .propertyName] will overwrite the same property in [ngStyle].

Of course, in addition to style binding, we can also use class binding to dynamically modify the style.

class binding

[class.className]

Using this method, we can Dynamically add or remove css classes based on the value of the bind variable.

Still using the button example just now.

Then the code becomes:

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}

//Component Class
private changeBorder: boolean = true;

The result is as shown:

The font looks a bit small, let’s add a change dynamically Font class: my

At this time, the code becomes:

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

The result is as shown:

[ngClass]

Like [ngStyle], angular also provides us with an instruction [ngClass] to dynamically bind multiple css classes.

Then we can use [ngClass] to refactor the above code

//template
<button 
  class="btn btn-primary" 
  [ngClass]= "{&#39;btnFont&#39;: changeFont, &#39;btnBorder&#39;: changeBorder}">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

The result is still:

[ngClass] required Bind an object, the key is the css class name, and the value is the bound variable.

[class.className] vs. [ngClass]

[class.className] can only bind one CSS class at a time.

And [ngClass] can bind multiple CSS classes at the same time.

When [class.className] and [ngClass] need to dynamically modify the same style, for example, both need to dynamically modify

font-size, [class.className] will be overwritten. The unified style in [ngClass].

[className]

angular also provides a binding method, which is to directly modify the

of the element. className to dynamically change the style.

But I

don’t recommend this way of use, why not? Look at the example below

//template
<button 
  class="btn btn-primary" 
  [className]="changedFont">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changedFont: string = "btnFont";

The result becomes like this:

Our pre-set bootstrap primary has been removed because [className] will add the dynamically bound class name and then remove all previous class name.
So this binding method is very dangerous, because for a component, we usually have many types to jointly control the style.

In general components, the use of [className] is highly deprecated.

Summary

Finally, let’s summarize the characteristics and differences of various style bindings in angular:

1. [style. propertyName] directly binds a style value of string type, or a variable of string type. It has the highest priority and will overwrite existing style attributes.

2. [ngStyle] binds an object of a style combination. The key is the css attribute name, and the value is the corresponding style value, or a variable of string type.

3. [class.className] directly binds true/false, or boolean type variables.

4. [ngClass] binds an object that is a combination of css class names. The key is the css class name, and the value is a true/false or boolean type variable.

5. [className] directly binds the css class name or string type variable. (This method is not recommended)

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implement the method of loading local static images through v-for in vue (detailed tutorial)

How to do it in vue Solve the problem of red reporting and warning when using v-for (detailed tutorial)

How to implement the search matching function in Vuejs (detailed tutorial)

Use the select drop-down box in vue.js to implement binding and value methods

Use Vuejs in v-for to use index to add a class to the first item And what are the specific steps?

The above is the detailed content of What are the methods of style binding in Angular 2+. For more information, please follow other related articles on the PHP Chinese website!