1# Show/Hide Event
2
3The show/hide event is triggered when a component is mounted or unmounted from the component tree. A component appears when mounted to the component tree and disappears when unmounted from the component tree.
4
5> **NOTE**
6>
7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## onAttach<sup>12+</sup>
10
11onAttach(callback: Callback\<void>): T
12
13Called when this component is mounted to the component tree.
14
15> **NOTE**
16>
17> The callback must be called before the component layout and rendering process.
18>
19> It is not allowed to make changes to the component tree in the callback, for example, initiating animations or altering the component tree structure with **if-else** statements.
20
21**Atomic service API**: This API can be used in atomic services since API version 12.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Return value**
26
27| Type| Description|
28| -------- | -------- |
29| T | Current component.|
30
31
32## onDetach<sup>12+</sup>
33
34onDetach(callback: Callback\<void>): T
35
36Called when this component is unmounted from the component tree.
37
38**Atomic service API**: This API can be used in atomic services since API version 12.
39
40**System capability**: SystemCapability.ArkUI.ArkUI.Full
41
42**Return value**
43
44| Type| Description|
45| -------- | -------- |
46| T | Current component.|
47
48## onAppear
49
50onAppear(event: () => void): T
51
52Called when this component is displayed.
53
54> **NOTE**
55>
56> This callback may be called after the component layout and rendering process.
57
58**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
59
60**Atomic service API**: This API can be used in atomic services since API version 11.
61
62**System capability**: SystemCapability.ArkUI.ArkUI.Full
63
64**Return value**
65
66| Type| Description|
67| -------- | -------- |
68| T | Current component.|
69
70
71## onDisAppear
72
73onDisAppear(event: () => void): T
74
75Triggered when the component is hidden.
76
77**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
78
79**Atomic service API**: This API can be used in atomic services since API version 11.
80
81**System capability**: SystemCapability.ArkUI.ArkUI.Full
82
83**Return value**
84
85| Type| Description|
86| -------- | -------- |
87| T | Current component.|
88
89
90## Example
91
92```ts
93// xxx.ets
94import { promptAction } from '@kit.ArkUI'
95
96@Entry
97@Component
98struct AppearExample {
99  @State isShow: boolean = true
100  @State changeAppear: string = 'Show/Hide'
101  private myText: string = 'Text for onAppear'
102
103  build() {
104    Column() {
105      Button(this.changeAppear)
106        .onClick(() => {
107          this.isShow = !this.isShow
108        }).margin(15)
109      if (this.isShow) {
110        Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
111          .onAttach(() => {
112            promptAction.showToast({
113              message: 'Text shown.',
114              duration: 2000,
115              bottom: 500
116            })
117          })
118          .onDetach(() => {
119            promptAction.showToast({
120              message: 'Text hidden.',
121              duration: 2000,
122              bottom: 500
123            })
124          })
125      }
126    }.padding(30).width('100%')
127  }
128}
129```
130
131![en-us_image_0000001219864151](figures/en-us_image_0000001219864151.gif)
132