Home >Web Front-end >JS Tutorial >A brief discussion on class and style binding in Angular10
This article will introduce to you the class and style binding in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Binding of class and style in Angular10
classBinding| Binding type | Syntax | Input type | Input value example |
|---|---|---|---|
| Single class binding | [class.foo]='flag' | boolean|undefined|null | true,false |
| Multiple class binding | [class]='classExpr' | string {[key :string]:boolean | undefined | null} Array |
'my-class1 my-class2' {foo: true, bar: false} ['foo ','bar'] |
Related recommendations: "angular tutorial"
1. Basic syntax
<p> <button>修改flag的值</button></p>
2. When the value of the expression is true, Angular will add this class, and when it is false, it will remove
flag = truechangeFlag():void {
this.flag = !this.flag} 3. When flag is true 
4. When flag is false 
1, string form
<p>绑定字符串的class</p>
classExpr:string = 'class-expr1 class-expr2 class-expr3'
2, binding result
1, object form
<p>绑定对象形式的class</p>
classExpr:object = {
'foo': true,
'bar': false}
2, binding result
1, array form
<p>绑定数组形式的class</p>
classExpr:Array<string> = ['foo','bar']</string>
2, binding result
styleBinding| Binding type | Syntax | Input type | Input value example |
|---|---|---|---|
| Single style binding | [style.width]=“width” | string undefined null | "100px" |
| Single style binding with units | [style.width.px]="width" | number undefined null | 100 |
| Multiple style bindings | [style]="styleExpr" | string {[key: string]: string undefined null} |
"width: 100px; height: 100px" {width: '100px', height: '100px'} |
1. The form of a single attribute
<p>绑定单个形式的style</p>
styleExpr:string = '100px'
2. Binding result
1, with unit
<p>绑定单个形式的style</p>
2, binding result
<p>绑定多个形式的style</p>
1, string
styleExpr:string = 'width: 100px;height: 200px'
2, object
styleExpr:object = {
width: '100px',
height: '200px'}
3, result graph
For more programming-related knowledge, please visit: Programming Video! !
The above is the detailed content of A brief discussion on class and style binding in Angular10. For more information, please follow other related articles on the PHP Chinese website!