Angular learning detailed explanation of the use of style binding (ngClass and ngStyle)

Project scenario:

In front-end development, we often encounter such a situation: different pages are shared For the same piece of code, at the same time, we need to decide whether to display this code or make certain changes to the page style based on the specific information of the page or a certain operation (such as clicking a button). At this time, we use angular Style binding in !

Problem Description

For example: Two pages of the website need to use the same piece of code. Writing it twice is not consistent with dry (don't repeat yourself) principle, the efficiency is also very low, so this is usually not done in Angular front-end development projects in the company. If one day your leader tells you: zzz, please change the code. With this prompt, I want this effect on this page and that effect on another page. What should you do? Below is a simple example to illustrate. [Related tutorial recommendations: "angular tutorial"]

Common code snippets (before modification):

<div class="normalTxt">      
	<span >I love angular</span>         
</div>

Reason analysis:

Style binding in angular can achieve the above requirements. Angular has two style binding instructions: [ngStyle], [ngClass]
Note: They must be enclosed in [ ] square brackets when using!

1.[ngStyle]

<any [ngStyle]=“obj”>

Instructions:

• any represents that the tag type for style binding can be any type, such as div, p, span, etc.
• Insert code piece here. The value bound by ngStyle must be an object.
• The object attribute is the css style name, and the value of the object is the specific style.

Simple usage (html file):

//将这段div的背景色改为绿色
<div [ngStyle]="{&#39;background-color&#39;:&#39;green&#39;}">
xxxx
</div>

Complex usage (html file):

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{&#39;background-color&#39;:pageName== &#39;homepage&#39; ? &#39;green&#39; : &#39;red&#39; }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

Note:

• any represents the tag type of style binding, which can be any type, such as div, p, span, etc.
• The value bound by ngClass must be an object.
• The object attribute is the class name, and the attribute value is a boolean type and the result can only be true/false. If true, the class will appear, otherwise the class will not appear.

Simple usage (html file):

//使用.homepageText样式
<div [ngClass]="{&#39;homepageText&#39;:true}">
xxxx
</div>

Complex usage (html file):

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{&#39;homepageText&#39;:pageName ==&#39;homepage&#39;}">
xxxx
</div>

(css file):

.homepageText {    
font-size: 14px;
font-weight: bold;
}

Solution:

The following is the solution to the beginning problem, I hope it can bring you some inspiration

Common code snippets (modification After):

f4d511afc8efca1bd60a437c643cdd97   
   45a2772a6b6107b401db3c9b82c049c2I love angular54bdf357c58b8a65c66d7c19c8e4d114         
16b28748ea4df4d9c2150843fecfba68

Description: The portal page wants to show the effect of normalTxt, and the detail page wants to show the effect of specialTxt. The specific styles of normalTxt and specialTxt need to be added in the corresponding .css/.scss files.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Angular learning detailed explanation of the use of style binding (ngClass and ngStyle). For more information, please follow other related articles on the PHP Chinese website!