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> The **onAreaChange** callback is specific to the current component only. There is no strict execution order or guarantee of constraints for the **onAreaChange** callbacks on ancestor or descendant components. 10 11## onAreaChange 12 13onAreaChange(event: (oldValue: Area, newValue: Area) => void): T 14 15Triggered when the component area changes in size or position due to layout updates. 16 17This event is not triggered for changes in render attributes caused by re-rendering, such as changes in [translate](ts-universal-attributes-transformation.md#translate) and [offset](ts-types.md#offset). In addition, if the component position is altered due to drawing changes, for example, through [bindSheet](ts-universal-attributes-sheet-transition.md#bindsheet), this event is also not triggered. 18 19> **NOTE** 20> 21> When a component is bound to both the **onAreaChange** event and the [position](ts-universal-attributes-location.md#position) attribute, the **onAreaChange** event responds to changes in the **position** attribute of type [Position](ts-types.md#position), but does not respond to changes in the **position** attribute of type Edges](ts-types.md#edges12) or [LocalizedEdges](ts-types.md#localizededges12). 22 23**Atomic service API**: This API can be used in atomic services since API version 11. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27**Parameters** 28 29| Name | Type | Mandatory| Description | 30| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 31| oldValue | [Area](ts-types.md#area8) | Yes | 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.| 32| newValue | [Area](ts-types.md#area8) | Yes | 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.| 33 34**Return value** 35 36| Type| Description| 37| -------- | -------- | 38| T | Current component.| 39 40## Example 41 42This example demonstrates how to set an area change event for a **Text** component. When the layout of the **Text** component changes, the **onAreaChange** event is triggered, allowing you to obtain relevant parameters. 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct AreaExample { 49 @State value: string = 'Text' 50 @State sizeValue: string = '' 51 52 build() { 53 Column() { 54 Text(this.value) 55 .backgroundColor(Color.Green) 56 .margin(30) 57 .fontSize(20) 58 .onClick(() => { 59 this.value = this.value + 'Text' 60 }) 61 .onAreaChange((oldValue: Area, newValue: Area) => { 62 console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 63 this.sizeValue = JSON.stringify(newValue) 64 }) 65 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 66 } 67 .width('100%').height('100%').margin({ top: 30 }) 68 } 69} 70``` 71 72 73
