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