AngularComponent interface

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

Signature

  1. export interface AngularComponent

Import

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

Example

  1. class Component extends PureComponent<Props> {
  2. element: HTMLElement;
  3. angularComponent: AngularComponent;
  4. componentDidMount() {
  5. const template = '<angular-component />' // angular template here;
  6. const scopeProps = { ctrl: angularController }; // angular scope properties here
  7. const loader = getAngularLoader();
  8. this.angularComponent = loader.load(this.element, scopeProps, template);
  9. }
  10. componentWillUnmount() {
  11. if (this.angularComponent) {
  12. this.angularComponent.destroy();
  13. }
  14. }
  15. render() {
  16. return (
  17. <div ref={element => (this.element = element)} />
  18. );
  19. }
  20. }

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

  1. destroy(): void;

Returns:

void

digest method

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

Signature

  1. digest(): void;

Returns:

void

getScope method

Used to access the Angular scope from the React component.

Signature

  1. getScope(): any;

Returns:

any