1# AbilityComponent 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.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 [WindowExtension](../apis/js-apis-application-windowExtensionAbility.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/js-apis-app-ability-want.md) | Yes | Description of the default ability to load.| 37 38 39## Events 40 41### onConnect 42 43onConnect(callback:() => void) 44 45Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**. 46 47### onDisconnect 48 49onDisconnect(callback:() => 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