title: Can't bind to 'options' since it isn't a known property of 'div'
body: <p>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?</p>
  <p>I have imported the module into AppModule also.</p>
  <p>At least I want to whether is this because of property binding or the wrong method of using the package.</p>
  <ul>
  <li>Html file  :</li>
  </ul>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;Angular 9&lt;/h1&gt;
      &lt;label for=&quot;date&quot;&gt;Select Date&lt;/label&gt;
  
      &lt;div 
      class=&quot;input-group&quot; daterangepicker 
      [options]=&quot;picker1&quot; 
      (selected)=&quot;selectedDate($event, chosenDate)&quot;
        (applyDaterangepicker)=&quot;applyDatepicker($event)&quot; (showDaterangepicker)=&quot;calendarEventsHandler($event)&quot;&gt;
        &lt;span class=&quot;form-control uneditable-input&quot; name=&quot;daterange&quot;&gt;
          {{ chosenDate.start | date:'mediumDate' }} - {{ chosenDate.end| date:'mediumDate' }}
        &lt;/span&gt;
        &lt;span class=&quot;input-group-btn&quot;&gt;
          &lt;a type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <ul>
  <li>ts file :</li>
  </ul>
  <pre><code>import moment from 'moment';
  import { DaterangepickerConfig } from &quot;ng2-daterangepicker&quot;;
  
  @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,
        &quot;opens&quot;: &quot;right&quot;,
        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(&quot;hi&quot;);
      
    }
  } 
  </code></pre>
  <ul>
  <li>Error Message :</li>
  </ul>
  <pre><code>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.
  </code></pre>
  <p>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.</p>