what add marker to map openlayer 5 with angular 6 - angular6

Question

I'm using the OpenLayers 5 for my project in angular 6. I implemented it to show a map and it is working :-). But I can't make it show any markers, please help me!!! Show examples with this version OpenLayers...
import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {fromLonLat} from 'ol/proj';
export class MyComponent implements OnInit {
map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
marker: Feature;
ngOnInit() {
this.marker = new Feature({
geometry: new Point([27.46164, 53.902257])
});
this.source = new OlXYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png',
features: [this.marker]
});
this.layer = new OlTileLayer({
source: this.source
});
this.view = new OlView({
center: fromLonLat([27.56164, 53.902257]),
zoom: 14
});
this.map = new OlMap({
target: 'map',
layers: [this.layer],
view: this.view
});
}
}

Answer 1

You need a vector layer and a vector source to add features. Something like the following:
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import XyzSource from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
export class MyComponent implements OnInit {
map: Map;
vectorSource: VectorSource;
vectorLayer: VectorLayer;
xyzSource: XyzSource;
tileLayer: TileLayer;
view: View;
marker: Feature;
ngOnInit() {
// Feature and vector
this.marker = new Feature({
geometry: new Point(fromLonLat([27.46164, 53.902257]))
});
this.vectorSource = new VectorSource({
features: [this.marker]
});
this.vectorLayer = new VectorLayer({
source: this.vectorSource
});
// XYZ
this.xyzSource = new XyzSource({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
});
this.tileLayer = new TileLayer({
source: this.xyzSource
});
// View and map
this.view = new View({
center: fromLonLat([27.56164, 53.902257]),
zoom: 14
});
this.map = new Map({
target: 'map',
layers: [this.tileLayer, this.vectorLayer],
view: this.view
});
}
}