How to show item depending on time & date

Question

So i'm working on an application that allows the creation of events, certain event info such as 'Location' and 'Coordinated' should be shown depending on the date that the user says they want the 'reveal date' to be and after this date. Currently, they are shown on only the 'reveal date' and not after that date but it needs to be shown on the 'reveal date' and after the reveal date. I have made a function to check today's date and the extra event info is displayed if 'today's date == reveal date'. I've attached an image of how it looks currently and how its supposed to look and I've attached another one with the code, as it would be too much code if I pasted it into here.

p.s. i'm quite new to angular so i'm not sure if this is the best way to do it, let me know if there is anything i'm doing really wrong. I'm using a .net core application as the backend api where the information is sent that the user inputs. if it cant be done in the frontend angular application, is there anyway that it can be done in the backend application (to specify a start reveal date and an end reveal date (but the end reveal date is always 'today')

frontend code:

<li class="conditional" *ngIf="event.revealDate == todaysDate">Location: {{event.location | titlecase}}</li>

typescript code (function to get todaysDate):

todaysDate: any;

revealLocation() {
const utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
console.log(utc);
this.todaysDate = utc;

}

This image shows how it currently looks and how it should look / This image has the code & some more info in it

[EDIT]

So i've done some changes, so if the date is bigger than or equal to the reveal date, it will show the info, but instead of showing the info for just that event, it reveals the info for all of the events in the array.

Typescript:

  showInfo = false;

  ifDateisAfter(revealDate) {
this.revealLocation();
// this.revealLoction just figures out todaysDate
if (revealDate === this.todaysDate) {
  this.showInfo = true;
} if (revealDate >= this.todaysDate) {
  this.showInfo = true;
} else {
  this.showInfo = false;
}

}

Angular:

<li class="conditional" *ngIf="showInfo == true">Location: {{event.location | titlecase}}</li>

<button class="btn btn-success" (click)="ifDateisAfter(event.revealDate)">Check Event Info</button>

Here are 2 more images, of the code and of the before and after the function / method is run to reveal the info based on the date

Updated Code with the new method / Whats happening in the application now

Answer 1

You can't use showInfo in this case, because it is a global variable, and you want specifics variable to each event (if I understand correctly)

What you should do is, insead of using showInfo, receive the event from a parameter in the function and set an attribute to the event:

Example:

ifDateIsAfter(event) {
  if (event.revealDate === this.todaysDate {
    event.showInfo = true;
  }
  ...
    event.showInfo = false;
  ...
}

In the HTML you use in the ngIf:

<li class="conditional" *ngIf="event.showInfo">Location: {{event.location | titlecase}}</li>

TIP: You don't need to put === true