import { Meta } from '@storybook/addon-docs';

<Meta title="Guides/Context API" parameters={{ previewTabs: { canvas: { hidden: true } } }} />

# Context API


This element can be used as the base of any Element.
Do this if you need to Observe Data, Consume or Provide a Context API or use a Resource.
The Element implements the Controller Host and provides a few shortcut methods for initializing some Controllers.

The methods are (*note this can be out of date, we need to look into how we can ensure this Doc originates from code.*)

### Consume a Context API.

From a Umbraco Element:
````
this.consumeContext('requestThisContextAlias', (context) => {
	// Notice this is a subscription, as context might change or a new one appears.
	console.log("I've got the context", context);
});
````

Or with a Controller using a Controller Host(Umbraco Element):

````
new UmbContextConsumerController(hostElement, 'requestThisContextAlias', (context) => {
	// Notice this is a subscription, as context might change or a new one appears.
	console.log("I've got the context", context);
});
````

### Provide a Context API.

From a Umbraco Element:
````
this.provideContext('myContextAlias', new MyContextApi());
````

Or with a Controller using a Controller Host(Umbraco Element):

````
new UmbContextProviderController(hostElement, 'myContextAlias', new MyContextApi());
````
