How to show Active Areas in Angular4

You might be defining onBeforeEventRender handler too late in the component lifecycle (after it is rendered). Try adding it to the config object (see also the Angular 4 Calendar tutorial at https://code.daypilot.org/62826/angular-4-calendar-quick-start-project):

  config: any = {
    viewType: "Week",
    startDate: "2017-05-01",
    onBeforeEventRender: args => { 
      event.e.areas = [{'action':'JavaScript','js':'(function(e) { this.calendar.ontrol.events.remove(e); })','bottom':9,'w':17,'v':'Hover','css':'event_action_delete','top':3,'right':2}]; 
    }
  };

Anyway, event deleting functionality is integrated in both the Calendar and Month controls. It's disabled by default. You can enable it using eventDeleteHandling propety:

  config: any = {
    viewType: "Week",
    startDate: "2017-05-01",
    eventDeleteHandling: "Update",
    onEventDelete: args => {
      console.log("Deleting event " + args.e.text());
    }
  };

I have the following config for my calendar:

public calendarOptions: any = {
startDate: DayPilot.Date.today(),
viewType: 'Week',
showAllDayEvents: true,
eventDeleteHandling: 'Update',
days: 7,
onBeforeEventRender: args => {
args.e.areas = [{action:'JavaScript',js:(function(e) { this.calendar.ontrol.events.remove(e); }),bottom:9,w:17,v:'Hover',css:'event_action_delete',top:3,right:2}];
},
onEventDeleted: (args) => console.log(args)
};

According to the calendar.ts file in the tutorial this should be enough to show the delete icon, but in my calendar it doesn't show.

You can use the DayPilot UI Builder (https://builder.daypilot.org/) to generate an Angular project with selected settings.

The Calendar builder (https://builder.daypilot.org/calendar) lets you enable event deleting (it adds eventDeleteHandling property and onEventDeleted event handler to the config for you). You can also test event deleting live before downloading the project.

Let me know if it still doesn't work.