make draggable marker take the lng and lan from geolocate point angular and mapbox

I want to make marker take the location from the geolocate point and change the point icon and make it marker and take the new lan and lng and use it every time user change his geolocate point print the newest one but if the marker take the lng and lon from point it will be more easy to get the newest one

 ngOnInit(): void {

var map = new mapboxgl.Map({
  accessToken,
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [ 30.013056, 31.208853], // starting position
zoom: 9,// starting zoom
trackResize:true 
});





var geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
  enableHighAccuracy: true
  },
  trackUserLocation: true 
  });
  // Add the control to the map.
  map.addControl(geolocate);
  // Set an event listener that fires
  // when a trackuserlocationstart event occurs.
  geolocate.on('trackuserlocationstart', function() {
  console.log('A trackuserlocationstart event has occurred.',geolocate)
  });
  // options.
var marker = new mapboxgl.Marker({
  draggable: true
  })
  .setLngLat([30.013056, 31.208853])
  .addTo(map);
  function onDragEnd() {
  var lngLat = marker.getLngLat();
  console.log(lngLat.lng ,lngLat.lat )
  }
   


    marker.on('dragend', onDragEnd);
  }

Source: Angular Questions