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

destroy method

Should be called when the React component will unmount.

Signature

destroy(): void;

Returns:

void

digest method

Can be used to trigger a re-render of the Angular component.

Signature

digest(): void;

Returns:

void

getScope method

Used to access the Angular scope from the React component.

Signature

getScope(): any;

Returns:

any