Idea about time ranges solutions

TimelineComponent.js

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-timeline',
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css']
})
export class TimelineComponent implements OnInit {

  disabled: boolean; check: boolean;

  private selectedTimerange: any = { name: 'Month To Date', key: 'MTD', startDate: '', endDate: '' };
  private selectedInterval: string = 'month';

  TimeRanges: any[] = [
    { name: 'Month To Date', key: 'MTD', startDate: '', endDate: '' },
    { name: 'Year To Date', key: 'YTD', startDate: '', endDate: '' },
    { name: 'Year To Date', key: 'YTD', startDate: '', endDate: '' },
    { name: 'Year To Date', key: 'YTD', startDate: '', endDate: '' },
    { name: '1 Year', key: '1Y', startDate: '', endDate: '' },
    'Year To Last Complete Month',
    'Calendar Year',
    '1 Month',
    '3 Months',
    'Current Quarter',
    'Last Quarter',
    '3 Years',
    'Max'
  ];
  constructor(
    public dialogRef: MatDialogRef<TimelineComponent>,
    @Inject(MAT_DIALOG_DATA) public chart: any) { }

  ngOnInit() {
    // checking if the params.timeline property of the selected charts is preset or custom
    if (this.chart.params.timeline === 'preset') {
      this.disabled = true;
      this.check = false;
    } else if (this.chart.params.timeline === 'custom') {
      this.disabled = false;
      this.check = true;
    }

    if(this.chart.params.timerange !== '') {
      this.selectedTimerange = this.TimeRanges.where({ key: '1Y' });
    } else {
      this.selectedTimerange = this.TimeRanges.where({ key: this.chart.params.timerange });
    }
  }

  onApply() {
    const params = {
      interval: this.selectedInterval
    }
    trigger('CHART_UPDATE', params);
  }

  /**
* @method enabledCustomTime
* @issue : CHARTS-136 create-checkbox-element
* this method enables and disables the datepicker elements depending on the checkbox
*/
  enabledCustomTime() {
    if (this.disabled === true) {
      this.disabled = false;
    } else {
      this.disabled = true;
    }
  }

}