AngularComponent | Grafana documentation

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.

Documentation

Grafana documentation

API Reference

@grafana/runtime

AngularComponent

Enterprise Open source

AngularComponent interface

Used to enable rendering of Angular components within a React component without losing proper typings.

Signature

export interface AngularComponent

Import

import { AngularComponent } from '@grafana/runtime';

Example

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.