Display specific array values based from if else in angular

Issue

I have a separate typescript for array values of events and event details. I want to categorize them with Upcoming events and past events. I already have a code for determining whether an event is a past event. I am new to angular and I want to know how i can do this.

 isPastEvent(){
    let datestring = this.eventList[this.index].date;
    let dateObj = new Date(datestring);
    let currentDateObj = new Date();
    if(currentDateObj > dateObj){
      return true;
    }else{
      return false;
    }
  }

This is the html code:

    <div class="event-section">   
    <div class="row d-flex my-2">
        <div class="col d-flex justify-content-evenly py-3 px-5">
            <div class="card-group justify-content-evenly">
                <div *ngFor="let event of eventList">
                    <a [routerLink]="event.eventDetailsLink">
                        <div class="card border rounded shadow thumbnail"><img class="card-img-top w-100 d-block thumbnail-img" [src]="event.eventThumbnail" />
                            <div class="card-body">
                                <h6 class="card-title">{{ event.eventShortName }}</h6>
                                <div class="row g-0">
                                    <div class="col-3 text-center">
                                        <span class = "month">{{ getMonth(event.date) }}</span>
                                        <br>
                                        <span class ="date"><strong>{{ getDate(event.date) }}</strong></span>
                                        <br>
                                        <span class = "year">{{ getYear(event.date) }}</span>
                                        
                                    </div>
                                    <div class="col">
                                        <h6 style="font-size: 14px;">{{ event.shortDesc }}</h6>
                                        <p style="font-size: 10px;">{{ event.eventType }}</p>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </a> 
                </div>
            </div>
        </div>
    </div>
   </div>

This is the array file:

export const events = [
{
    eventShortName: 'IALC: How the Construction Industry Adapts to New Technologies?',
    shortDesc: 'How Is Blockchain Driving Digital Transformation',
    eventType: 'Webinar',
    eventDetailsLink: ['/event-details', 'How-the-Construction-Industry-Adapts'],
    paramLink: 'How-the-Construction-Industry-Adapts',
    title: 'Industry Academe Linkage for Construction: How the Construction Industry Adapts to New Technologies?',
    desc: 'This webinar will feature a panel discussion that revolves around the different technologies used in the construction industry in the Philippines and how CIORS could potentially be one of the new technologies to be used as a staple in the industry and academe.',
    goal: 'The aim is to share knowledge with fellow members of the construction industry and construction academe on the various technologies used in the industry and how CIORS could play a role in it.',
    date: '08/25/2021',
    time:{
        startTime: '11:30 AM',
        endTime: '01:30 PM'
    },
    eventThumbnail: '../../../../assets/img/event1.png',
    eventCover: '../../../../assets/img/event1.png',
    registerLink: '#'
},

Solution

If you would like to create 2 lists of events, then use filter. If you would like to mark past events then you can use *ngIf.

For the *ngIf option.

In the component create a variable to compare against, with the date in a format that makes it easy:

export class AppComponent {
  currentDate = new Date();

In html add a class, or print some text

  <button *ngIf="item.event > currentDate" class="btn btn-success btn-block" (click)="pdfCertificateFromPageIframe()">Certificate</button>

If you would like to create 2 lists, then use a filter. Define an array for for the older events and one for the new events, or print directly. From another example, define the variable:

 futureEvents: SingleSeries = [{name: 'init', value: 0}];

Then run a filter. I find this pattern works:

events.filter(event => item.date > current_date).map(item => {
  this.futureEvents.push($item);
}    

You can push any type into the collection that matches the type. It would be best to define an interface that matches your object type. Then define the array based on it. e.g. for a simple 2 property array

futureEvents: SingleSeries = [{name: 'init', value: 0}];

Then we can push objects with name and value properties onto it.

this.futureEvents.push({name: 'init', value: 0})   

Answered By - Interlated