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

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