Parse Angular 2 + style binding mode and angular Style

Parse Angular 2 + style binding mode and angular Style

Introduction

After ngx (angular 2 +) is developedngxA year and a half have passed. At the beginning of development, angular2 RC was used. Now angular5 is available!

Ngx is a component-based framework from the beginning of design. Therefore, a page or a button is a component.

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

Looking back, angular provides us with several attribute binding methods.

Next, let's take a look at how to use style binding in components.

Style binding

[Style. propertyName]

We have a button. The default style isbootstrapOfprimary,

If the button size is different on different pages, you need to dynamically bind the font size of the button. You can use[style.propertyName].

Code in template

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

Code in the Component class

private fontSize: string = "2em";

Result

If we need to dynamically set the border radius of the buttonborder-radius,

The code in template is changed:

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

The code in the Component class is changed:

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

The result is:

Use [style. propertyName] to bind style attributes is not rough, but once there is a new demand, we need to add the attributes we need to bind, at this time, the attributes bound to the component will become more and more, is there a way to createobjectTo store the attributes we need to bind? Of course, [ngStyle] can help us do this.

[NgStyle]

So we can directly use the above example[ngStyle]To dynamically bind a buttonfont-sizeAndborder-radius.

The code in template becomes:

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

The code of the Component class is changed:

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

Result:

[Style. propertyName] vs. [ngStyle]

[Style. propertyName] only one attribute can be bound at a time.

[NgStyle] can bind multiple attributes at the same time.

When [style. propertyName] and [ngStyle] are bound to the same attribute, for example, dynamic modification is required.font-size,[Style. propertyName] will overwrite the same attribute in [ngStyle.

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

Class binding

[Class. className]

In this way, we can dynamically add or remove css class based on the value of the bound variable.
Use the button example.

The code is changed:

//template<button   class="btn btn-primary"   [class.btnBorder]="changeBorder" >  Style Binding</button>//CSS.btnBorder { border-color: green; border-radius: 10px;}//Component Classprivate changeBorder: boolean = true;

Result

The font looks a little small. Let's dynamically Add a class to change the font: my

The code is changed:

//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 Classprivate changeBorder: boolean = true;private changeFont: boolean = true;

Result

[NgClass]

Like [ngStyle], angular also provides a command [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 Classprivate changeBorder: boolean = true;private changeFont: boolean = true;

The result is as follows:

[NgClass] You need to bind an object. The key is the css class name, and the value is the bound variable.

[Class. className] vs. [ngClass]

[Class. className] Only One CSS class can be bound at a time.

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

When [class. className] and [ngClass] need to modify the same style dynamically, for example, both must be modified dynamically.font-size,[Class. className] will overwrite the unified style in [ngClass.

[ClassName]

Angular also provides a binding method by directly modifying the elementclassNameTo dynamically change the style.

But INot recommendedWhy is this method not recommended? See the following example.

//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 Classprivate changedFont: string = "btnFont";

The result is as follows:

The bootstrapprimaryRemoved because [className] adds dynamically bound class names and removes all previous class names.
Therefore, this binding method is very risky, because for a component, we usually have many types to jointly control the style.

[ClassName] is not recommended for common components.

Summary

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

1. [Style. propertyName] directly binds a string type style value or a string type variable. The highest priority will overwrite the existing style attributes.
2. [NgStyle] An object bound to a style combination. The key is the css attribute name, the value is the corresponding style value, or a string type variable.
3. [Class. className] bind a variable of the true/false or boolean type directly.
4. [NgClass] An object bound to 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 bind the css class name or string type variable. (This method is not recommended)

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.