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. This event is not triggered for render attribute changes caused by re-rendering, such as changes of [translate](ts-universal-attributes-transformation.md#translate) and [offset](ts-types.md#offset).
16
17**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name  | Type                     | Mandatory| Description                                                        |
24| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
25| 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.|
26| 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.|
27
28**Return value**
29
30| Type| Description|
31| -------- | -------- |
32| T | Current component.|
33
34## Example
35
36```ts
37// xxx.ets
38@Entry
39@Component
40struct AreaExample {
41  @State value: string = 'Text'
42  @State sizeValue: string = ''
43
44  build() {
45    Column() {
46      Text(this.value)
47        .backgroundColor(Color.Green)
48        .margin(30)
49        .fontSize(20)
50        .onClick(() => {
51          this.value = this.value + 'Text'
52        })
53        .onAreaChange((oldValue: Area, newValue: Area) => {
54          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
55          this.sizeValue = JSON.stringify(newValue)
56        })
57      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
58    }
59    .width('100%').height('100%').margin({ top: 30 })
60  }
61}
62```
63
64![en-us_image_0000001189634870](figures/en-us_image_0000001189634870.gif)
65