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
. 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 buttonborder-radius, the code in the
<button class="btn btn-primary" [style.fontSize]="fontSize" [style.borderRadius]="borderRadius"> Style Binding </button>
private fontSize: string = "2em"; private borderRadius: string = "10px";
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
<button class="btn btn-primary" [ngStyle]="btnStyle" > Style Binding </button>
private btnStyle: any = { borderRadius: "10px", fontSize: "2em" };
[style.propertyName] vs. [ngStyle]
[style.propertyName] can only bind one property at a timewhile [ngStyle] Multiple properties can be bound at the same timeWhen [style.propertyName] and [ngStyle] are bound to the same property, for example, both need to be dynamically modifiedfont-size,
[style .propertyName] will overwrite the same property in [ngStyle].
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.
//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;
//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;
[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]= "{'btnFont': changeFont, 'btnBorder': 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;
[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 modifyfont-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.
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";
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:
[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.
[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.
[class.className] directly binds true/false, or boolean type variables.
[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.
[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 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!