Choosing the upcoming event in a angular organizer application

Question

I am creating an organizer application in angular.Here I want to highlight the next event by showing it separately.What should I add in the 'upcoming' method to get this output.

//component
export class EventListComponent implements OnInit {

  list: Event[];
  constructor(private service: EventService,
              private firestore: AngularFirestore,
              private toastr: ToastrService) { }

  ngOnInit(): void {
    this.service.getEvents().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...(item.payload.doc.data() as object)
        } as Event;
      });
    });
  }

  onEdit(eve: Event){
    this.service.formData = Object.assign({}, eve);
  }

  upcoming(){ }

  onDelete(id: string){
    if (confirm('Are you sure')){
      this.firestore.doc('events/' + id).delete();
      this.toastr.warning('Deleted successfully', 'Delete');
    }
  }

}

Here is the HTML file.I want to get this highlighted event in to the first '' in the below code

//html
<div>
  <ul class="list-group" *ngFor="let eve of list">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <label class="mt-2">{{eve.activity}}</label>
      <label class="mt-2">{{eve.date}} / {{eve.time}}</label>
      <div class="mt-2">
       <span class="mx-2 text-success">
         <i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"></i>
       </span>
        <span class="mx-2 text-danger">
         <i class="fas fa-trash" (click)="onDelete(eve.id)"></i>
       </span>
      </div>
    </li>
  </ul>

 <ul class="list-group" *ngFor="let eve of list">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     <label class="mt-2">{{eve.activity}}</label>
     <label class="mt-2">{{eve.date}} / {{eve.time}}</label>
     <div class="mt-2">
       <span class="mx-2 text-success">
         <i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"></i>
       </span>
       <span class="mx-2 text-danger">
         <i class="fas fa-trash" (click)="onDelete(eve.id)"></i>
       </span>
     </div>
   </li>
 </ul>
</div>

I am using firebase as the database here.I have added the complete code here

Answer 1

You could have a method to reduce your events to the date closest to the date:

For ex : Today

 const today = new Date();
 const closest = events.reduce((a, b) => a.Date - today < b.Date - today ? a : b);

DEMO

var now = Date.now();
var ONE_DAY_IN_MS = 86400000;
function randomDate() {
  return new Date(now + (5 * ONE_DAY_IN_MS - Math.round(Math.random() * 10 * ONE_DAY_IN_MS)));
}
var data = [
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()}
];

console.log("Entries:");
data.forEach(function(entry) {
  console.log(entry.Date.toISOString());
});

const today = new Date();
const closest = data.reduce((a, b) => a.Date - today < b.Date - today ? a : b);

console.log("today", today.toISOString());
console.log("closest", closest.Date.toISOString());