title: Choosing the upcoming event in a angular organizer application
body: <p>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.</p>
  
  <pre><code>//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 =&gt; {
        this.list = actionArray.map(item =&gt; {
          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');
      }
    }
  
  }
  </code></pre>
  
  <p>Here is the HTML file.I want to get this highlighted event in to the first '' in the below code</p>
  
  <pre><code>//html
  &lt;div&gt;
    &lt;ul class="list-group" *ngFor="let eve of list"&gt;
      &lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
        &lt;label class="mt-2"&gt;{{eve.activity}}&lt;/label&gt;
        &lt;label class="mt-2"&gt;{{eve.date}} / {{eve.time}}&lt;/label&gt;
        &lt;div class="mt-2"&gt;
         &lt;span class="mx-2 text-success"&gt;
           &lt;i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"&gt;&lt;/i&gt;
         &lt;/span&gt;
          &lt;span class="mx-2 text-danger"&gt;
           &lt;i class="fas fa-trash" (click)="onDelete(eve.id)"&gt;&lt;/i&gt;
         &lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
   &lt;ul class="list-group" *ngFor="let eve of list"&gt;
     &lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
       &lt;label class="mt-2"&gt;{{eve.activity}}&lt;/label&gt;
       &lt;label class="mt-2"&gt;{{eve.date}} / {{eve.time}}&lt;/label&gt;
       &lt;div class="mt-2"&gt;
         &lt;span class="mx-2 text-success"&gt;
           &lt;i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"&gt;&lt;/i&gt;
         &lt;/span&gt;
         &lt;span class="mx-2 text-danger"&gt;
           &lt;i class="fas fa-trash" (click)="onDelete(eve.id)"&gt;&lt;/i&gt;
         &lt;/span&gt;
       &lt;/div&gt;
     &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using firebase as the database here.I have added the complete code <a href="https://codesandbox.io/s/6dymi?file=/src/app/events/event-list/event-list.component.html" rel="nofollow noreferrer">here</a></p>