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.

Documentationbreadcrumb arrow Grafana documentationbreadcrumb arrow API Referencebreadcrumb arrow @grafana/runtimebreadcrumb arrow AngularComponent
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

MethodDescription
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