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## onAreaChange 10 11onAreaChange(event: (oldValue: Area, newValue: Area) => void) 12 13Triggered when the component area changes in size or position due to layout updates. This event is not triggered for render attribute changes caused by re-rendering, such as changes of **translate** and **offset**. 14 15**System capability**: SystemCapability.ArkUI.ArkUI.Full 16 17**Parameters** 18 19| Name | Type | Mandatory| Description | 20| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 21| oldValue | [Area](ts-types.md#area8) | No | Width and height of the target element as well as its coordinates relative to the parent element and the upper left corner of the page before the change.| 22| newValue | [Area](ts-types.md#area8) | No | Width and height of the target element as well as its coordinates relative to the parent element and the upper left corner of the page after the change.| 23 24 25## Example 26 27```ts 28// xxx.ets 29@Entry 30@Component 31struct AreaExample { 32 @State value: string = 'Text' 33 @State sizeValue: string = '' 34 35 build() { 36 Column() { 37 Text(this.value) 38 .backgroundColor(Color.Green) 39 .margin(30) 40 .fontSize(20) 41 .onClick(() => { 42 this.value = this.value + 'Text' 43 }) 44 .onAreaChange((oldValue: Area, newValue: Area) => { 45 console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 46 this.sizeValue = JSON.stringify(newValue) 47 }) 48 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 49 } 50 .width('100%').height('100%').margin({ top: 30 }) 51 } 52} 53``` 54 55
