How to perform button click on custom panel

1

i started with

npx @grafana/toolkit plugin:create my-plugin

i was able to deploy this and see my changes.

All i want to do right now is to perform a button click.

on my module.html i put

<button class="btn navbar-button" (click)="onClickMe()">Click me!</button>

on module.ts i put:

onClickMe() {
    console.log('You are my hero!');
}

but this never gets called. No errors. No nothing.

Can you please guide me how to do this?

2

i was using the Angular template.

as i found out Grafana seems to prefer React.

So i switched to React an got it working:

Here is the complete code for SimplePanel.tsx

import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
interface Props extends PanelProps<SimpleOptions> {}
export class SimplePanel extends PureComponent<Props> {
  
  render() {
    const { options, data, width, height } = this.props;
    return (
      <div
        style={{
          position: 'relative',
          width,
          height,
        }}
      >
        <div>
          <div>Count: {data.series.length}</div>
          <div>{options.text}</div>
        </div>
        <div>
          <button className="btn navbar-button" onClick={this.onClickMe}>Click me!</button>
        </div>
      </div>
    );
  }
  onClickMe() {
    console.log('The link was clicked.');
  }
}