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

1.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.1 Single attribute binding

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.2 Multiple attribute binding - string form

1, string form

<p>绑定字符串的class</p>

classExpr:string = 'class-expr1 class-expr2 class-expr3'

2, binding result

1.3 Multiple attribute binding - object form

1, object form

<p>绑定对象形式的class</p>

classExpr:object = {
    'foo': true,
    'bar': false}

2, binding result

1.4 Multiple attribute binding-array form

1, array form

<p>绑定数组形式的class</p>

classExpr:Array<string> = ['foo','bar']</string>

2, binding result

2. 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'}

2.1 Single attribute

1. The form of a single attribute

<p>绑定单个形式的style</p>

styleExpr:string = '100px'

2. Binding result

2.2 Single attribute with unit

1, with unit

<p>绑定单个形式的style</p>

2, binding result

2.3 Multiple attributes Binding

<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!