Pfthb

I have two inputs: <input type="date" id="fromDate"> and <input type="date" id="toDate">, and then a *ngFor loop iterating through a list of items. All of these items have a property activity_date.

I want to be able to only show the components having their activity_date property between the dates of fromDate and toDate. For this, I am using MomentJS, more precisely the function moment(activity_date).isBetween(fromDate, toDate).

The problem here is I want to assign the result of the previous method to a [hidden] attribute so if an input is changed, the [hidden] property will be updated.

But here's the catch. How can I do to show / hide the components whenever the inputs are changed ?

Here's what I've tried so far:

view.component.html

<app-events
 type="calendar-item"
 [hidden]="moment(item.activity_date).isBetween(this.fromDate, this.toDate);"
 [data]="item"
 ></app-events>

view.component.ts

import Component, OnInit from "@angular/core";
import * as moment from "moment";

@Component(
 selector: "app-view",
 templateUrl: "./view.component.html",
 styleUrls: ["./view.component.css"]
)
export class ViewComponent implements OnInit 
 fromDate: string;
 toDate: string;

 item = [
 
 id: 1,
 activity_date: "14 November 2018",
 
 ];

 ngOnInit() 

 isBetweenDate(date: string) 
 return moment(date).isBetween(this.fromDate, this.toDate);
 

It works if I write values in the method by hand, and it only works at the loading of the page.

I was trying to look after the EventEmitter or the Custom Attributes, but I'm not sure I am moving to the right direction.

I think you have done almost right. You made isBetweenDate function but don't use it.

I have created an example for you. It is same as your one, but not exact one. It compares the date with fromDate and toDate. So here, you can change dates and you will get an instant output based on the changed dates.

Here is the link:

StackBlitz Link: https://stackblitz.com/edit/angular-48bxrq