1# AbilityFirstFrameStateObserver (System API) 2 3**AbilityFirstFrameStateObserver** defines the observer used to listen for the complete of the first frame rendering of a given ability. It is used as an input parameter of [on](js-apis-app-ability-appManager-sys.md#appmanageronabilityfirstframestate12) to listen for the completion event. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> The APIs provided by this module are system APIs. 9 10## Modules to Import 11 12```ts 13import { appManager } from '@kit.AbilityKit'; 14``` 15 16## AbilityFirstFrameStateObserver 17 18### onAbilityFirstFrameDrawn 19 20onAbilityFirstFrameDrawn(data: AbilityFirstFrameStateData): void 21 22Called when the first frame of the ability is rendered. 23 24**System API**: This is a system API. 25 26**System capability**: SystemCapability.Ability.AbilityRuntime.Core 27 28**Parameters** 29 30| Name| Type| Mandatory| Description| 31| -------- | -------- | -------- | -------- | 32| data | [AbilityFirstFrameStateData](js-apis-inner-application-abilityFirstFrameStateData-sys.md) | Yes| Data returned after the first frame is rendered.| 33 34**Example** 35 36```ts 37import { appManager } from '@kit.AbilityKit'; 38import { BusinessError } from '@kit.BasicServicesKit'; 39 40let observer: appManager.AbilityFirstFrameStateObserver = { 41 onAbilityFirstFrameDrawn(data: appManager.AbilityFirstFrameStateData) { 42 console.info(`onAbilityFirstFrameDrawn success, abilityFirstFrameStateData: ${data}.`); 43 } 44}; 45 46try { 47 appManager.on('abilityFirstFrameState', observer); 48} catch (e) { 49 let code = (e as BusinessError).code; 50 let msg = (e as BusinessError).message; 51 console.error(`appmanager.on failed, err code: ${code}, err msg: ${msg}.`); 52} 53``` 54