Transform from EPSG:4326 to EPSG:3857

[Fatalityap]

Hi, I am a little bit new to Angular2(3,4,5,6) I have created map click event handler and I can receive coordinates via event.coordinate but how can I transform it to EPSG:3857 ?

In raw javascript I can do like this ol.proj.transform(event.coordinate, 'EPSG:4326', 'EPSG:3857') but this is not working for me.

Here is part of my code:

import { Component } from '@angular/core';
import {AngularOpenlayersModule} from 'ngx-openlayers';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  coords = '';

  public showCoords(event) {
     console.log(event);
     this.coords = 'X: ' + event.coordinate[0] + ' Y: ' + event.coordinate[1];
     console.log(ol.proj.transform(event.coordinate, 'EPSG:4326', 'EPSG:3857'));
  }
}

html code here:

<aol-map [width]="'800px'" [height]="'300px'"  (onClick)="showCoords($event)">
 <aol-interaction-default></aol-interaction-default>
  <aol-view [zoom]="5">
    <aol-coordinate [x]="10" [y]="10" [srid]="'EPSG:4326'"></aol-coordinate>
  </aol-view>
  <aol-layer-tile>
    <aol-source-osm></aol-source-osm>
  </aol-layer-tile>
  <aol-content>
    <div id="controlnameforcssstyling" class="ol-unselectable ol-control">
      <div (click)="showCoords($event)">Click me!!</div>
    </div>
  </aol-content>
  <div>{{coords}}</div>
</aol-map>

How can I do it?
How can I even have access to ol object? Maybe I need to import something?

Can you help me?

[Ghostbird]

I had exactly the same scenario. The answer is that you have openlayers, since it is installed as a dependency of ngx-openlayers.

Just add this line to the top of your TS file:

import * as ol from 'openlayers';

Then you can use ol.proj.transform I'm not sure whether you can save on memory by importing only select parts of openlayers.

[Fatalityap]

Thanks )