Events

Element <countries-map> accepts callbacks for the following events:

chartReady

The chartReady event is fired when a chart is completely loaded.

Bind the chartReady event in the countries-map component like this:

<countries-map [data]="mapData" (chartReady)="ready()"></countries-map>

Your ready() function receives no parameters. You can use it like:

public ready() {
  // your logic
}

chartError

The chartError event is fired if there are some errors with a chart.

Bind the chartError event in the countries-map component, like this:

<countries-map [data]="mapData" (chartError)="error($event)"></countries-map>

Your error() function is passed an event which interface looks like this:

interface ChartErrorEvent {
  id: string | CharErrorCode;
  message: string;
  detailedMessage: string;
  options: Object;
}

You can import the ChartErrorEvent interface and CharErrorCode enum in your .ts file:

import { ChartErrorEvent, CharErrorCode } from 'countries-map';

and then use it like:

public error(event: ChartErrorEvent) {
  if (event.id === CharErrorCode.loading) {
    // error was produced during loading
  }
  // your logic
}

See more details about [returned values for error event][google-charts-error-event].

chartSelect

The chartSelect event is fired when a chart is selected/clicked.

Bind the chartSelect event in the countries-map component, like this:

<countries-map [data]="mapData" (chartSelect)="select($event)"></countries-map>

Your select() function is passed an event whose interface looks like this:

interface ChartSelectEvent {
  selected: boolean;
  value: number | null;
  country: string;
}

You can import the ChartSelectEvent interface in your .ts file:

import { ChartSelectEvent } from 'countries-map';

and then use it like:

public select(event: ChartSelectEvent) {
  // your logic
}