Parse Angular 2 + style binding mode and angular Style

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.