Menu
Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.
Enterprise
Open source
AngularComponent interface
Used to enable rendering of Angular components within a React component without losing proper typings.
Signature
typescript
export interface AngularComponent
Import
typescript
import { AngularComponent } from '@grafana/runtime';
Example
typescript
class Component extends PureComponent<Props> {
element: HTMLElement;
angularComponent: AngularComponent;
componentDidMount() {
const template = '<angular-component />' // angular template here;
const scopeProps = { ctrl: angularController }; // angular scope properties here
const loader = getAngularLoader();
this.angularComponent = loader.load(this.element, scopeProps, template);
}
componentWillUnmount() {
if (this.angularComponent) {
this.angularComponent.destroy();
}
}
render() {
return (
<div ref={element => (this.element = element)} />
);
}
}
Methods
Method | Description |
---|---|
destroy() | Should be called when the React component will unmount. |
digest() | Can be used to trigger a re-render of the Angular component. |
getScope() | Used to access the Angular scope from the React component. |
destroy method
Should be called when the React component will unmount.
Signature
typescript
destroy(): void;
Returns:
void
digest method
Can be used to trigger a re-render of the Angular component.
Signature
typescript
digest(): void;
Returns:
void
getScope method
Used to access the Angular scope from the React component.
Signature
typescript
getScope(): any;
Returns:
any
Was this page helpful?
Related resources from Grafana Labs
Additional helpful documentation, links, and articles:

Getting started with the Grafana LGTM Stack
In this webinar, we’ll demo how to get started using the LGTM Stack: Loki for logs, Grafana for visualization, Tempo for traces, and Mimir for metrics.

Getting started with Grafana dashboard design (EMEA Timezone)
In this webinar, you'll learn how to design stylish and easily accessible Grafana dashboards that tell a story.

Unify your data with Grafana plugins: Datadog, Splunk, MongoDB, and more
In this webinar, learn how to leverage Grafana's plugin ecosystem for access to 80+ data sources, including plugins for Datadog, Splunk, MongoDB, and more.