1# Component Area Change Event 2 3The area change event is triggered when the component's size, position, or any other attribute that may affect its display area changes. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Events 11 12| Name | Bubbling Supported| Description | 13| ---------------------------------------- | ---- | ---------------------------------------- | 14| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | No | Triggered when the component area changes.| 15 16 17## Example 18 19```ts 20// xxx.ets 21@Entry 22@Component 23struct AreaExample { 24 @State value: string = 'Text' 25 @State sizeValue: string = '' 26 27 build() { 28 Column() { 29 Text(this.value) 30 .backgroundColor(Color.Green).margin(30).fontSize(20) 31 .onClick(() => { 32 this.value = this.value + 'Text' 33 }) 34 .onAreaChange((oldValue: Area, newValue: Area) => { 35 console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 36 this.sizeValue = JSON.stringify(newValue) 37 }) 38 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 39 } 40 .width('100%').height('100%').margin({ top: 30 }) 41 } 42} 43``` 44 45
