How to use the @grafana/runtime.getAngularLoader function in @grafana/runtime

loadAngularPanel() {
    const { panel, dashboard } = this.props;

    // if we have no element or already have loaded the panel return
    if (!this.element || panel.angularPanel) {
      return;
    }

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { panel: panel, dashboard: dashboard };
    const angularPanel = loader.load(this.element, scopeProps, template);

    panel.setAngularPanel(angularPanel);
  }

componentDidUpdate(prevProps: Props) {
    if (!this.element || this.state.angularCtrl) {
      return;
    }

    // Set a copy of the meta
    this.model = cloneDeep(this.props.app.meta);

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { ctrl: this };
    const angularCtrl = loader.load(this.element, scopeProps, template);

    this.setState({ angularCtrl });
  }

async loadAlertTab() {
    const { angularPanel, panel } = this.props;

    const scope = angularPanel.getScope();

    // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
    if (!scope.$$childHead) {
      setTimeout(() => {
        this.forceUpdate();
      });
      return;
    }

    this.panelCtrl = scope.$$childHead.ctrl;
    const loader = getAngularLoader();
    const template = '';

    const scopeProps = { ctrl: this.panelCtrl };

    this.component = loader.load(this.element, scopeProps, template);

    const validatonMessage = await getAlertingValidationMessage(
      panel.transformations,
      panel.targets,
      getDataSourceSrv(),
      panel.datasource
    );

    if (validatonMessage) {
      this.setState({ validatonMessage });
    }

componentDidUpdate(prevProps: Props) {
    if (!this.element || this.state.angularCtrl) {
      return;
    }

    // Set a copy of the meta
    this.model = cloneDeep(this.props.app.meta);

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { ctrl: this };
    const angularCtrl = loader.load(this.element, scopeProps, template);

    this.setState({ angularCtrl });
  }

// check if we need to load another datasource
    if (loadedDataSourceValue !== this.props.dataSourceValue) {
      if (this.angularQueryEditor) {
        this.angularQueryEditor.destroy();
        this.angularQueryEditor = null;
      }
      this.loadDatasource();
      return;
    }

    if (!this.element || this.angularQueryEditor) {
      return;
    }

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
    this.angularQueryEditor = loader.load(this.element, scopeProps, template);
    this.angularScope = scopeProps.ctrl;
  }

componentDidMount() {
    const loader = getAngularLoader();

    const template = '';
    const scopeProps = { dashboard: this.props.dashboard };

    this.angularCmp = loader.load(this.element, scopeProps, template);
  }

`
      <div class="panel-options-group">` +
        (i &gt; 0
          ? `<div class="panel-options-group__header">
           <span class="panel-options-group__title">{{ctrl.editorTabs[${i}].title}}
           </span>
         </div>`
          : '') +
        `<div class="panel-options-group__body">
          
        </div>
      </div>
      `;
    }

    const loader = getAngularLoader();
    const scopeProps = { ctrl: panelCtrl };

    this.angularOptions = loader.load(this.element, scopeProps, template);
  }

async componentDidMount() {
    if (!this.element) {
      return;
    }

    const { datasource, initialQuery, exploreEvents, range } = this.props;
    this.initTimeSrv(range);

    const loader = getAngularLoader();
    const template = ' ';
    const target = { datasource: datasource.name, ...initialQuery };
    const scopeProps = {
      ctrl: {
        datasource,
        target,
        refresh: () => {
          setTimeout(() => {
            this.props.onQueryChange?.(target);
            this.props.onExecuteQuery?.();
          }, 1);
        },
        onQueryChange: () => {
          setTimeout(() => {
            this.props.onQueryChange?.(target);
          }, 1);

async componentDidMount() {
    if (!this.element) {
      return;
    }

    const { groupBys, filters, hideGroupBys } = this.props;
    const loader = getAngularLoader();

    const filtersChanged = (filters: string[]) => {
      this.props.filtersChanged(filters);
    };

    const groupBysChanged = (groupBys: string[]) => {
      this.props.groupBysChanged(groupBys);
    };

    const scopeProps: any = {
      loading: null,
      labelData,
      groupBys,
      filters,
      filtersChanged,
      groupBysChanged,