grid: need to find a way to add angular component inside react

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import coreModule from 'app/core/core_module';
 import ReactGridLayout from 'react-grid-layout';
 import {DashboardModel} from '../model';
+import {DashboardPanel} from './DashboardPanel';
 import sizeMe from 'react-sizeme';
 
 const COLUMN_COUNT = 24;
@@ -68,14 +69,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     for (let panel of this.props.dashboard.panels) {
       panelElements.push(
         <div key={panel.id.toString()} className="panel">
-          <div className="panel-container">
-            <div className="panel-header grid-drag-handle">
-              <div className="panel-title-container">{panel.type}</div>
-            </div>
-            <div className="panel-content">
-              {panel.title} - {panel.type}
-            </div>
-          </div>
+          <DashboardPanel panel={panel} />
         </div>,
       );
     }

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

+import React from 'react';
+
+export interface DashboardPanelProps {
+  panel: any;
+}
+
+export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
+  private element: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    return (
+      <div ref={element => this.element = element} />
+    );
+  }
+}
+

public/app/features/dashboard/dashgrid/dashboard_plugin.ts

+import coreModule from 'app/core/core';
+
+