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