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

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

# Umbraco Element

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._)

```
observe<T>(source: Observable<T>, callback: (_value: T) => void, unique?: string): UmbObserverController<T>

provideContext<R = unknown>(alias: string | UmbContextToken<R>, instance: R): UmbContextProviderController<R>

consumeContext<R = unknown>(alias: string | UmbContextToken<R>, callback: UmbContextCallback<R>): UmbContextConsumerController<R>
```

Use these for an smooth consumption, like this request for a Context API using a simple string context, where the callback value is unknown

```
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 use the UmbContextToken type to define the type of the context, like this

```
const contextAlias = new UmbContextToken<SomeType>('description of context for debugging purposes');

this.consumeContext(contextAlias, (context) => {
	// Notice this is a subscription, as context might change or a new one appears, but the value is strongly typed
	console.log("I've got the context", context);
});
```
