grafana/docs/sources/packages_api/runtime/angularcomponent.md

+++

-----------------------------------------------------------------------

Do not edit this file. It is automatically generated by API Documenter.

-----------------------------------------------------------------------

title = "AngularComponent" keywords = ["grafana","documentation","sdk","@grafana/runtime"] type = "docs" +++

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.

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