ng-fullcalendar - Angular 6 - external events in ngFor loop

Question

I try to use "drag and drop" function with external events.

It works except if I use *ngFor :

My HTML file :

<p>Interventions en attente</p>
<ul id='external-events'>
     <li *ngFor="let ticket of ticketList">
        <div class='fc-event'>{{ ticket.message }}</div>  // Doesn't Work !!
     </li>
     <li>
         <div class='fc-event'>My Event 1</div>  // Works !!
     </li>
</ul>

Here my TS file :

ngAfterViewInit() {
    $('#external-events .fc-event').each(function () {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });
}

How can I solve that ?

**************** UPDATE 2 ***********************

Here is my new getTickets method by following advices in comment :

 getNewTickets() {
    this.loading = false;
    this.myJarviaServices.getNewTickets()
        .subscribe(resp => {
                console.log('angular');
            this.ticketList = resp.content;
            console.log(this.ticketList);
                this.customevents.forEach(function (item) {
                    // store data so the calendar knows to render an event upon drop
                    $(item.nativeElement).data('event', {
                        title: $.trim($(item.nativeElement).text()), // use the element's text as the event title
                        stick: true // maintain when user navigates (see docs on the renderEvent method)
                    });
                    // make the event draggable using jQuery UI
                    $(item.nativeElement).draggable({
                        zIndex: 999,
                        revert: true,      // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    });

                });
        },
        error => {
            console.log('authService.login error' + error);
            console.log('error status : ' + error.status);
            // this.alertService.error(error);
            this.myJarviaServices.error(error);
        });
}

I have no error message but it doesn't work

Answer 1

Here is the angular version code.

<p>Interventions en attente</p>
<ul id='external-events'>
     <li #customevents *ngFor="let ticket of ticketList">
        <div class='fc-event'>{{ ticket.message }}</div>  // Doesn't Work !!
     </li>
</ul>

Component:

@ViewChildren('customevents') customevents: QueryList<any>;
ngAfterViewInit() {
   setTimeout(()=>{
   this.customevents.forEach(function (item) {
        // store data so the calendar knows to render an event upon drop
        $(item.nativeElement).data('event', {
            title: $.trim($(item.nativeElement).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(item.nativeElement).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });
 }, 100);
}