1# AbilityComponent (System API)
2
3**AbilityComponent** is a container for independently displaying an ability.
4
5>  **NOTE**
6>
7>  This component is deprecated since API version 10. You are advised to use [\<UIExtensionComponent>](ts-container-ui-extension-component-sys.md) instead.
8>
9>  This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
10>
11>  The APIs provided by this component are system APIs.
12
13## Constraints
14
15**AbilityComponent** is rendered independently and cannot be overlaid with other display content.
16
17**AbilityComponent** cannot process input events. Events are directly distributed to the internal ability for processing without passing through the current ability.
18
19Only width and height can be set for **AbilityComponent**. These attributes are mandatory and cannot be dynamically updated.
20
21The ability to be started must inherit from [WindowExtension](../js-apis-application-windowExtensionAbility-sys.md).
22
23## Child Components
24
25Not supported
26
27
28## APIs
29
30AbilityComponent(want: Want)
31
32**Parameters**
33
34| Name| Type                                                  | Mandatory| Description               |
35| ------ | ---------------------------------------------------------- | ---- | ----------------------- |
36| want   | [Want](../../apis-ability-kit/js-apis-app-ability-want.md) | Yes  | Description of the default ability to load.|
37
38
39## Events
40
41### onConnect
42
43onConnect(callback:() =&gt; void)
44
45Called when this **AbilityComponent** is started. You can then use APIs in the **AbilityComponent**.
46
47### onDisconnect
48
49onDisconnect(callback:() =&gt; void)
50
51Called when this **AbilityComponent** is destroyed.
52
53## Example
54
55```ts
56// xxx.ets
57@Entry
58@Component
59struct MyComponent {
60
61  build() {
62      Column() {
63          AbilityComponent({
64              want: {
65                  bundleName: '',
66                  abilityName: ''
67              },
68          })
69          .onConnect(() => {
70              console.log('AbilityComponent connect')
71          })
72          .onDisconnect(() => {
73              console.log('AbilityComponent disconnect')
74          })
75      }
76  }
77}
78```
79