How to add a marker on Angular for Leaflet Routing Machine

I currently have this code here where I want to add custom icon that I will design.

plotRoute(): void {
if (this.selectedOrder) {
this.primengTableHelper.showLoadingIndicator();

this._itsHttpService.GetOrder(this.selectedOrder.orderId).subscribe({
next: (results) => {
const pickup = results['stops'].find((stop: any) => stop.isPickup);
const dropOff = results['stops'].find((stop: any) => stop.isDropOff);

if(!pickup && !dropOff && !this.mapAdmin){
this.primengTableHelper.hideLoadingIndicator();
return;
}

if(this.routingControl){
this.mapAdmin.removeControl(this.routingControl)
}


this.routingControl = L.Routing.control({
waypoints: [
L.latLng(pickup.location.latitude, pickup.location.longitude),
L.latLng(dropOff.location.latitude, dropOff.location.longitude),
],
routeWhileDragging: true,
createMarker: (i: number, waypoint: L.Routing.Waypoint, n: number) => {

}
}).addTo(this.mapAdmin);


this.primengTableHelper.hideLoadingIndicator();
},
error: (err) => {
console.error('Failed to load order details:', err);
this.notify.error(this.l('FailedToLoadOrderDetails'));
this.primengTableHelper.hideLoadingIndicator();
},
});
}
}

createIcon(label: string): L.DivIcon {
return L.divIcon({
className: 'custom-marker',
html: `<div style="background-color: black; color: white; padding: 5px; border-radius: 50%;">${label}</div>`,
iconSize: [20, 20],
});
}


but I get the error: Object literal may only specify known properties, and 'createMarker' does not exist in type 'RoutingControlOptions'.ts(2353)

is there another solution I can use to go about this?

Continue reading...