How to keep current HtmlElement active and change its properties?
There are some repetitions in the current implementation, which can be refactored and the code will become clearer. For example:

Use a custom type or interface for the private members.

interface MyPoint { // of course, choose a better name than MyPoint, which matches your context!
  element: HTMLElement; 
  pointMeter: Point;
}

export class Kizda {
  private point1: MyPoint;
  private point2: MyPoint;

  ...
}


The createPoint function produces only a part of the point object, but it can indeed produce instances of MyPoint. And it does not need to be nested inside the action function:

private createPoint(e: MouseEvent, color: string): MyPoint {
  const size = '12px';
  const element = document.createElement('div');
  const style = element.style;

  style.position = 'absolute';
  style.width = size;
  style.height = size;
  style.background = color;
  style.borderRadius = '50%';

  this.setCoordinates(element, e);

  document.body.append(element);

  const pointMeter = this.getMouseMPoint(e);
  return { element, pointMeter };
}

private setCoordinates(point: HTMLElement, e: MouseEvent): void {
  const style = point.style;
  style.left = `${e.x}px`;
  style.top = `${e.y}px`;
}


Finally, adjust the implementation of the action method by reusing the refactored items:

public action(e: MouseEvent): void {
  if (!this.point1) {
    this.point1 = this.createPoint(e, 'red');
  }
  else if (!this.point2) {
    this.point2 = this.createPoint(e, 'green');
  }
  else {
    this.setCoordinates(this.point2.element, e);
  }
}