Display specific array values based from if else in angular

Question

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: '#'
},

Interlated · Accepted Answer · 2022-02-22 03:16:48Z

1

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})

edited Feb 22, 2022 at 3:16

answered Feb 21, 2022 at 3:09

Interlated

6,02610 gold badges54 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jieunbi Over a year ago

how do i push events with multiple arguments? I have edited the question and added the array file for reference.

Interlated Over a year ago

If you set the type of 'future events' to the target type you can push any type onto it.

Collectives™ on Stack Overflow

Display specific array values based from if else in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related