Can't bind to 'options' since it isn't a known property of 'div'

Question

I am trying to implement the ng2-daterangepicker module in my application. But I am facing a property binding error in it. I don't know why?

I have imported the module into AppModule also.

At least I want to whether is this because of property binding or the wrong method of using the package.

• Html file :

<div>
  <div class="container">
    <h1>Angular 9</h1>
    <label for="date">Select Date</label>

    <div 
    class="input-group" daterangepicker 
    [options]="picker1" 
    (selected)="selectedDate($event, chosenDate)"
      (applyDaterangepicker)="applyDatepicker($event)" (showDaterangepicker)="calendarEventsHandler($event)">
      <span class="form-control uneditable-input" name="daterange">
        {{ chosenDate.start | date:'mediumDate' }} - {{ chosenDate.end| date:'mediumDate' }}
      </span>
      <span class="input-group-btn">
        <a type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></a>
      </span>
    </div>

  </div>
</div>

• ts file :

import moment from 'moment';
import { DaterangepickerConfig } from "ng2-daterangepicker";

@Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
  })
export class CallTagsComponent{

  public chosenDate: any = {
    start: moment().subtract(12, 'month'),
    end: moment().subtract(6, 'month'),
  };

  public picker1 = {
    opens: 'left',
    startDate: moment().subtract(5, 'day'),
    endDate: moment(),
    isInvalidDate: function (date: any) {
      if (date.isSame('2017-09-26', 'day'))
        return 'mystyle';
      return false;
    }
  }

  constructor(private daterangepickerOptions: DaterangepickerConfig) {
    this.daterangepickerOptions.settings = {
      locale: { format: 'YYYY-MM-DD' },
      alwaysShowCalendars: false,
      "opens": "right",
      ranges: {
        'Last Month': [moment().subtract(1, 'month'), moment()],
        'Last 3 Months': [moment().subtract(4, 'month'), moment()],
        'Last 6 Months': [moment().subtract(6, 'month'), moment()],
        'Last 12 Months': [moment().subtract(12, 'month'), moment()],
      }
    };
  }

  public selectedDate(value: any, dateInput: any): void {
    console.log(value);
    dateInput.start = value.start;
    dateInput.end = value.end;
  }

  public calendarEventsHandler(e: any): void {
    console.log({ calendarEvents: e });
  }

  public applyDatepicker(e: any) {
    console.log({ applyDatepicker: e });
  }

  public updateSettings(): void {
    this.daterangepickerOptions.settings.locale = { format: 'YYYY/MM/DD' };
    this.daterangepickerOptions.settings.ranges = {
      '30 days ago': [moment().subtract(1, 'month'), moment()],
      '3 months ago': [moment().subtract(4, 'month'), moment()],
      '6 months ago': [moment().subtract(6, 'month'), moment()],
      '7 months ago': [moment().subtract(12, 'month'), moment()],
    };
  }

  say(){
    console.log("hi");
    
  }
} 

• Error Message :

Can't bind to 'options' since it isn't a known property of 'div'.ngtsc(-998002)
list.component.ts(104, 7): Error occurs in the template of component CallTagsComponent.

Note: The App is compiled successfully and the input field with the default value is displayed but it is not working fine and shows above mentioned error.

Answer 1

You can not just apply the event handlers and bindings to a random div element. It's supposed to be applied to an input element. Following is a quick attempt, note that I only moved all bindings and event handlers to an input that's also nested inside the div where all your selections and so on are.

<div>
  <div class="container">
    <h1>Angular 9</h1>
    <label for="date">Select Date</label>

    <div>
      <input class="input-group" daterangepicker
             [options]="picker1"
             (selected)="selectedDate($event, chosenDate)"
             (applyDaterangepicker)="applyDatepicker($event)" (showDaterangepicker)="calendarEventsHandler($event)"/>
      <span class="form-control uneditable-input" name="daterange">
        {{ chosenDate.start | date:'mediumDate' }} - {{ chosenDate.end| date:'mediumDate' }}
      </span>
      <span class="input-group-btn">
        <a type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></a>
      </span>
    </div>

  </div>
</div>